Modern web geliştirmede framework seçimi, projenin başarısını doğrudan etkileyen stratejik bir karardır. Next.js ve Astro, farklı felsefelere sahip iki güçlü araçtır. Her ikisini de üretim ortamında kullandıktan sonra elde ettiğimiz deneyimleri bu yazıda paylaşıyoruz.
Mimari Felsefe
Next.js, React ekosisteminin en olgun full-stack framework'üdür. SSR, SSG, ISR ve App Router gibi özelliklerle hem statik hem dinamik sayfalar oluşturabilirsiniz. Varsayılan olarak React'in tüm JavaScript'ini istemciye gönderir.
Astro ise "content-first" felsefesiyle tasarlanmıştır. Varsayılan olarak sıfır JavaScript göndererek sayfaları statik HTML olarak derler. React, Vue, Svelte gibi herhangi bir UI framework'ünü "ada" olarak entegre edebilirsiniz.
| Kriter | Next.js | Astro |
|---|---|---|
| Varsayılan JS | ~85-200KB (React runtime) | 0KB (sıfır JS) |
| Rendering | SSR, SSG, ISR, Streaming | SSG, SSR, Server Islands |
| UI Framework | Sadece React | React, Vue, Svelte, Solid... |
| En İyi Senaryo | SaaS, Dashboard, Web App | Blog, Portföy, Kurumsal Site |
| LCP (Tipik) | 1.5 - 3.0s | 0.5 - 1.2s |
Ne Zaman Next.js?
Yoğun kullanıcı etkileşimi gerektiren projeler — SaaS dashboardları, e-ticaret platformları, gerçek zamanlı uygulamalar — Next.js'in güçlü olduğu alanlardır. Server Actions, middleware, route handlers gibi full-stack özellikleri ile backend ve frontend'i tek bir projede yönetebilirsiniz.
Ne Zaman Astro?
İçerik ağırlıklı siteler — bloglar, portföyler, kurumsal siteler, dokümantasyon siteleri — Astro'nun parladığı alanlardır. Sıfır JavaScript yaklaşımı sayesinde Lighthouse puanları doğal olarak 95-100 arasında gelir. Dinamik bileşenler için ise yalnızca gerektiğinde JavaScript yüklenir.
"Doğru framework seçimi, projede kullanılmayan kodu yazmamakla başlar. Astro bu prensibi varsayılan yapar; Next.js ise size tam kontrol verir."
Webify Yaklaşımı
Biz Webify olarak her iki framework'ü de aktif olarak kullanıyoruz. Bu portföy sitesi Astro ile inşa edildi — çünkü içerik odaklı, SEO kritik ve sıfır JavaScript felsefesi burada mükemmel uyum sağlıyor. Öte yandan Patisenin.com projemizde Next.js kullandık — çünkü orada gerçek zamanlı arama, dinamik filtreleme ve zengin kullanıcı etkileşimi gerektiren bir platform söz konusuydu. Önemli olan aracı değil, problemi tanımaktır.