Üç gündür bu blog sitesini Next.js ’den Astro ’ya taşımaya çalışıyordum, nihayet bitti. Sanırım. Ufak tefek pürüzleri saymazsak…
Neden Astro?
Geçiş yapmamın iki sebebi var; birincisi sitenin büyük kısmı statik içerik olmasından dolayı Astro’nun daha hafif ve performanslı olacağını düşünmem, ikincisi de uzun zamandır Next.js kullanıyordum - yeni bir şeyler denemek istedim.
Astro’da mantık olarak oldukça hoşuma giden bir sistem var; Next.js’ten farklı olarak sayfanın büyük kısmı HTML olarak sunuluyor. Sadece etkileşimli kısımlar JavaScript ile yükleniyor. Bu etkileşimli küçük parçalara component island (bileşen adası) deniyor. Yani tüm sayfayı JS ile hydrate etmek yerine, sadece gerektiğinde çalışacak parçalar için JS kullanılıyor. Bunun avantajı sitenin büyük kısmı sunucu tarafından inşa edildiği için performans olarak ciddi artış sağlıyor.
Astro’nun bir diğer güzel yanı da birçok UI Framework ile çalışabiliyor. Her ne kadar ben sadece React ve MDX kullansam da geniş bir hareket alanı açısından güzel bir özellik.
Ve son olarak da hızlı derleme ve sayfa yükleme süresi; lighthouse skorumun artması da cabası. Aşağıda henüz optimize bile etmeye başlamadığım Astro skoru ile bir ara optimize etmeye çalıştığım Next.js skorunı görebilirsiniz.
Geçiş Süreci
Sıfırdan site oluşturmak çok zaman alacağı için bu sefer hazır bir şablon üzerinden gittim. Mevcut sitemin tasarımını andırdığı için dönüşümün kolay olacağını düşündüğümden jktrn/astro-erudite şablonunu kullandım.
İçerikleri taşıma işlemi oldukça kolay oldu aslında. Astro yazıları src/content altında tutmamızı istiyor. Next.js’de MDX kullanıyordum, Astro’da da aynısını kullandığım için olduğu gibi yazıları kopyaladım.
Elimde çoğu React bileşenini, mümkün olduğunca Astro bileşenine çevirdim. Bu kısım biraz yorucu oldu, bazı şeyleri nasıl yapacağımı anlamam için Astro’nun belgelerini okumam gerekti sık sık.
**API yolları **için Astro src/pages/api klasörünü kullanıyor, elimdeki API route’larını Astro’ya uygun bir şekilde yeniden yazdım. Bu kısım bazı route’ların karmaşıklığından dolayı zorlasa da genel olarak sorunsuz geçti. Varsayılan olarak Astro tüm sayfaları statik oluşturmak istiyor. API route’larının dinamik kalabilmesi için hepsine export const prerender = false eklemem gerekti, API’lerin neden güncellenmediğini anlayana kadar canım çıkmıştı.
Karşılaştığım Zorluklar
Ne dinliyorum, müzikler, izlediğim dizi - filmler kısmı, otomatik opengraph resimleri oluşturma gibi dinamik içerik kısımları beni bir miktar zorladı. Kendi özel MDX bileşenlerim vardı. Çoğunu Astro bileşenine çevirsem de bazılarını iki dosya halinde (.tsx ve .astro ) kullanmam gerekti çünkü Astro bileşenleri sadece .astro dosyaları içinde kullanılabiliyor. Yani bir React bileşeni içinde .astro bileşeni çağırmak mümkün değil ama tam tersi mümkün. Astro dosyaları daha çok bir orkestra şefi gibi çalışıyor. Bu kısım biraz kafa karıştırıcı olabiliyor.
Resimlerin optimize edilmesi için src/images altında tutmam gerekiyor. Fakat MDX içinde resimleri bir bileşen ile kullanmak istersem resimleri import etmem gerekiyor ki bu bana oldukça saçma geliyor hâlâ, o yüzden sadece bir yerde yaptım. Import işlemiyle uğraşmak istemediğimden bazı MDX bileşenlerini kullanabilmek için public klasöründe tuttuğum resimler de var. Bu kısım gereksiz dosya dağınıklığına neden oluyor, şu an ne yazık ki bir çözüm bulmuş değilim.
Kısaca beni en çok zorlayan bu dinamik/statik olayı ve dosya yapısı ve bileşen yazımı konularına alışmak oldu.
Sonuç
Hâlâ gözüme çarpan pürüzler ve resim konusu gibi tam anlamıyla çözmediğim konular var. Daha az dinamik içeriğim olsa muhtemelen hızlı bir geçiş olurdu.
Performans artışı hoşuma gitse de Next.js’den Astro’ya kesinlikle geçilmeli, mükemmel bir şeymiş der miyim? Sanırım hayır; şimdilik ikisine de eşit mesafedeyim.