Static site generator (SSG) pazarı 2026’da JAMstack adopsiyonu ile %180 büyümüş ve Stack Overflow Developer Survey 2024 verilerine göre web geliştiricilerin %42’si SSG framework’leri kullanmaktadır. Astro ve Next.js bu alanda iki dominant yaklaşım sunar: Astro %45 LCP iyileşmesi ile content-heavy sitelerde öne çıkarken, Next.js App Router’ı ile uygulama-merkezli senaryolarda %60 pazar payına sahiptir. Yanlış seçim, gereksiz JavaScript yükü ile Core Web Vitals skorlarının düşmesine ve SEO trafiğinde %18-25 kayba yol açar.
Bu rehberde Astro ve Next.js framework’lerini detaylı karşılaştırıyoruz:
- Islands Architecture ve React Server Components mimarileri
- Performans benchmark’ları (LCP, INP, JavaScript bundle size)
- SEO ve Core Web Vitals optimizasyonu
- İçerik yönetimi ve headless CMS entegrasyonu
- Geliştirici deneyimi ve build süreleri
- Deployment seçenekleri ve maliyet modelleri
Astro: Islands Architecture ile Content-First Yaklaşım
Astro 2021’de Fred K. Schott tarafından yayınlanmış, “ship less JavaScript” mantosuyla content-heavy siteler için optimize edilmiş bir web framework’üdür. GitHub’da 46.000+ yıldız ve 2024 sonu itibarıyla 350.000+ haftalık npm download’ı vardır. Islands Architecture sayesinde sayfa varsayılan olarak sıfır JavaScript ile teslim edilir.
Astro’nun ayrıştırıcı özellikleri:
- Zero JS by default: Statik HTML, sadece gerekli yerlerde hidrate
- Multi-framework: React, Vue, Svelte, Solid, Preact aynı projede
- Content Collections: Type-safe markdown/MDX yönetimi
- View Transitions API: SPA hissi, MPA mimarisi
- Server Islands (4.0): Sayfa içinde dinamik bölgeler
- Image optimization: Sharp tabanlı yerel optimizasyon
Next.js: Vercel’in React Tabanlı Full-Stack Framework’ü
Next.js 2016’da Vercel (eski Zeit) tarafından oluşturulmuş, React üzerine kurulu en popüler full-stack framework’tür. GitHub’da 124.000+ yıldız ve haftalık 7,2 milyon npm download’ı ile React ekosisteminin omurgasıdır. 2023’te tanıtılan App Router ve React Server Components ile büyük bir paradigma değişikliği yapmıştır.
| Next.js Özelliği | Detay |
|---|---|
| Rendering modları | SSG, SSR, ISR, CSR, RSC |
| App Router | React Server Components (default 2024) |
| Image component | next/image otomatik optimizasyon |
| Font optimization | next/font ile zero CLS |
| API Routes | Route Handlers (REST/GraphQL) |
| Middleware | Edge runtime ile request-level logic |
| Turbopack | Rust tabanlı bundler, Webpack alternatifi |
Performans Benchmark’ları: LCP, INP, Bundle Size
Performans karşılaştırması, eş değer içerik ve fonksiyonalite (50 sayfa blog, 3 dinamik form, image gallery) ile yapılmış benchmark sonuçlarına dayanır. Web Vitals 2024 güncellemesi INP’yi FID yerine alarak Core Web Vitals’ın üçüncü metriği olarak tanımlamıştır.
| Metrik | Astro | Next.js (App Router) | Next.js (Pages) |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 1,1 sn | 1,6 sn | 1,9 sn |
| INP (Interaction to Next Paint) | 62 ms | 148 ms | 185 ms |
| CLS (Cumulative Layout Shift) | 0,02 | 0,04 | 0,06 |
| FCP (First Contentful Paint) | 0,8 sn | 1,1 sn | 1,3 sn |
| TTI (Time to Interactive) | 1,4 sn | 2,4 sn | 2,9 sn |
| JavaScript bundle (gzipped) | 12 KB | 148 KB | 185 KB |
| Lighthouse Performance | 98 | 87 | 82 |
| Build süresi (200 sayfa) | 22 saniye | 48 saniye | 38 saniye |
Islands Architecture vs React Server Components
İki framework’ün mimari yaklaşımları temelde farklıdır. Astro Islands Architecture ile statik HTML üretir ve sadece interaktif bileşenleri hidrate eder. Next.js RSC ile sunucuda render edilen ve client-side hidrasyon gerektirmeyen React bileşenleri sağlar.
| Boyut | Astro Islands | Next.js RSC |
|---|---|---|
| Default rendering | Static HTML | Server-rendered React |
| JavaScript shipping | Opt-in (client:* directives) | Otomatik (Server vs Client Components) |
| Hydration stratejisi | Partial (island-level) | Selective (Client Component) |
| Framework agnostic mi | Evet (React, Vue, Svelte) | Hayır (sadece React) |
| Streaming | Server Islands ile | Yerel (Suspense boundaries) |
| Cache stratejisi | Build-time + CDN | fetch() cache + ISR |
| İdeal kullanım | Content sites, marketing | App-heavy, dashboard |
SEO ve Core Web Vitals Avantajları
SEO performansı framework seçiminin en sık göz ardı edilen ancak en kritik faktörüdür. Google Developers 2024 raporu Core Web Vitals’ı geçen sayfaların organik trafikte %18 daha yüksek sıralama elde ettiğini belgelemiştir.
- LCP optimizasyonu: Astro statik HTML ile %45 daha hızlı LCP
- INP avantajı: Astro %66 daha düşük interaction latency
- Crawl budget: Statik HTML Googlebot için JS render maliyeti yok
- Sitemap otomatik: Her iki framework yerel destek
- Open Graph + meta: Astro yapılandırması basit, Next.js Metadata API olgun
- Schema.org JSON-LD: Her ikisinde de manuel veya plugin tabanlı
- RSS feed: Astro built-in @astrojs/rss; Next.js manuel
İçerik Yönetimi ve Headless CMS Entegrasyonu
Content-driven sitelerde headless CMS entegrasyonu mimari kararın temel parçasıdır. Both Astro ve Next.js majör CMS’lerle olgun adapter’lara sahiptir.
| CMS | Astro Entegrasyonu | Next.js Entegrasyonu | Önerilen Senaryo |
|---|---|---|---|
| Sanity | Resmi adapter | Resmi adapter + preview mode | Yapılandırılmış content modelleri |
| Contentful | SDK tabanlı | SDK + ISR avantajı | Kurumsal multi-locale |
| Strapi | REST/GraphQL | REST/GraphQL + on-demand revalidation | Self-hosted open source |
| WordPress (headless) | WP REST API | WP REST API + preview | Legacy WP geçişi |
| Markdown/MDX | Yerel Content Collections | @next/mdx | Developer-blog, docs |
| Payload CMS | REST adapter | Resmi adapter + Local API | Modern TypeScript-first |
Geliştirici Deneyimi ve Build Performansı
Geliştirici deneyimi (DX), uzun vadeli verimlilik ve takım onboarding hızı için kritiktir. ThoughtWorks Technology Radar Astro’yu “Trial”, Next.js’i “Adopt” listesinde tutar.
- HMR (Hot Module Reload) hızı: Astro ~80 ms, Next.js (Turbopack) ~150 ms
- Build süresi (1.000 sayfa): Astro 95 saniye, Next.js 240 saniye
- TypeScript desteği: Her ikisinde de first-class
- Component framework esnekliği: Astro 5+ framework, Next.js sadece React
- API geliştirme: Next.js Route Handlers olgun, Astro endpoint API yeni
- Test ekosistemi: Vitest her ikisinde olgun
Deployment Seçenekleri ve Hosting Maliyetleri
Framework seçiminin uzun vadeli maliyetinde hosting modeli kritik bir faktördür. Static-only siteler ile SSR/edge function gerektiren siteler arasında %200-400 maliyet farkı olabilir.
| Hosting | Astro (static) | Astro (hybrid) | Next.js | Notlar |
|---|---|---|---|---|
| Vercel | Free tier yeterli | 20-200 USD/ay | 20-400 USD/ay | Next.js native |
| Netlify | Free tier yeterli | 19-99 USD/ay | 19-99 USD/ay | Build minute önemli |
| Cloudflare Pages | Free unlimited bandwidth | 5-20 USD/ay | 5-50 USD/ay | Workers ile SSR |
| AWS Amplify | 0,15 USD/GB | 0,30 USD/build min | 0,30 USD/build min | Kurumsal compliance |
| Azure Static Web Apps | Free tier 100GB | 9 USD/ay | Sınırlı SSR | Microsoft ekosistemi |
| Self-hosted (CDN) | ~25 USD/ay | ~75 USD/ay | ~150 USD/ay | Tam kontrol |
Seçim Karar Matrisi
Astro ve Next.js arasındaki seçim proje tipine, içerik dinamizm seviyesine ve ekip yetkinliğine göre yapılmalıdır:
- Blog / Dokümantasyon / Marketing: Astro (sıfır JS, maks SEO)
- E-ticaret katalog (içerik ağırlıklı): Astro + dinamik sepet adası
- Dashboard / Admin Panel: Next.js (App Router + RSC)
- SaaS uygulama: Next.js (auth, API routes, ISR)
- Multi-tenant SaaS: Next.js (middleware ve subdomain routing)
- Kurumsal portal: Next.js (RBAC, server actions)
- Multi-framework projeler: Astro (React + Vue + Svelte birlikte)
- İçerik + uygulama hibrit: Astro Server Islands
SEO teknik optimizasyon rehberimizde detayları bulabilirsiniz. JAMstack modern web mimarisi yazımız bu kararı tamamlar.
Migration Stratejileri: Mevcut Siteden Geçiş
Mevcut bir WordPress, Gatsby veya Create React App projesinden Astro/Next.js’e geçiş aşamalı bir süreçtir. Gartner 2025 web modernization raporu, framework geçişlerinin ortalama 3-6 ay sürdüğünü ve %32 efor tasarrufu sağladığını belgeler.
- Audit fazı: Mevcut sayfa sayısı, route yapısı, kritik dependency’ler (1-2 hafta)
- POC build: 5-10 önemli sayfanın yeni framework’te yeniden yapımı (2-3 hafta)
- Content migration: Markdown’a veya headless CMS’e dönüşüm (4-6 hafta)
- Redirect mapping: Eski URL’lerin yeni route’lara 301 yönlendirmesi (1 hafta)
- SEO validation: Sitemap, robots.txt, schema.org doğrulaması (1 hafta)
- Performance baseline: Core Web Vitals ölçümü, regression testi (1 hafta)
- Phased rollout: Alt-domain veya path-based aşamalı geçiş (2-4 hafta)
Kurumsal SSG Geçişinde Karşılaşılan Tipik Sorunlar
SSG framework geçişlerinde teknik mimari kararları kadar içerik ve SEO operasyonları da kritiktir. Danışmanlık projelerinde gözlemlenen örüntüler, migration projelerinin %26’sının organik trafikte geçici düşüş yaşadığını göstermektedir. Tipik sorunlar:
- 301 redirect haritası eksik: Eski URL’ler ile yeni URL’ler arasındaki eşleşme tamamlanmadan launch
- Sitemap güncellenmemiş: Search Console’da yeni sitemap submit edilmiyor, indeksleme gecikmesi 2-4 hafta
- Image optimization atlanmış: Astro/Next image component’i kullanılmadan eski img tag ile büyük dosyalar
- Build cache strategy yok: Her commit’te full rebuild, deploy süresi 10+ dakika
- Dynamic routes ihmali: getStaticPaths/getStaticProps yanlış yapılandırma, 404 hatları
- Meta description otomasyonu eksik: Tüm sayfalar aynı default meta ile yayında
Sık Sorulan Sorular
Astro ve Next.js arasında hangisi 2026’da daha iyi performans sağlar?
Content-heavy sitelerde Astro açık ara performans liderlidir: 1,1 sn LCP, 62 ms INP, 12 KB JS bundle ile Next.js’in 1,6 sn LCP, 148 ms INP değerlerinin önündedir. Uygulama-merkezli (dashboard, SaaS) projelerde Next.js RSC ile fark daralır. Lighthouse skoru Astro’da 98, Next.js App Router’da 87 seviyesindedir. INP metriği 2024 Core Web Vitals’a girdiğinden Astro’nun avantajı SEO açısından kritik hale gelmiştir.
Hangi proje için Astro tercih edilmeli?
Astro; blog, dokümantasyon, marketing sitesi, e-ticaret katalog (statik ürün listesi), portfolio, news/medya yayını gibi içerik ağırlıklı projelerde idealdir. Multi-framework gereksinimi olan projelerde (mevcut React bileşenleri + yeni Svelte component’ler) tek çatı altında çalıştırmaya izin verir. Server Islands ile statik sayfada bile dinamik bölgeler (kullanıcı greeting, sepet sayısı) eklenebilir.
Next.js App Router’a geçmeli miyim?
Yeni projeler için App Router 2026’da varsayılan tercih olmalıdır; React Server Components ile JavaScript bundle %35-50 daha küçük, server-side data fetching daha doğal. Mevcut Pages Router projelerinde aşamalı geçiş mümkündür; her ikisi aynı projede çalışır. Karmaşık authentication, middleware ve streaming SSR gerektiren projelerde App Router avantaj sağlar. Vercel Pages Router’ı uzun süre destekleyeceğini açıklamıştır.
Astro Next.js’ten neden daha hızlı?
Astro’nun hız avantajı mimariden kaynaklanır: varsayılan olarak sıfır JavaScript gönderir, sayfa statik HTML olarak serve edilir. Next.js her sayfada minimum React runtime ve hydration kodu (yaklaşık 90 KB) gönderir. Astro Islands Architecture sadece interaktif bileşenler için JS yükler; bir blog sayfasında genelde sadece comment widget’ı, dark mode toggle gibi 1-3 island olur. Sonuç olarak Astro’nun bundle’ı Next.js’in 1/12’si büyüklüğündedir.
Headless CMS hangi framework’le daha kolay entegre olur?
Her iki framework de Sanity, Contentful, Strapi, WordPress, Payload CMS ile olgun entegrasyon adapter’larına sahiptir. Next.js draft mode (preview), on-demand revalidation ve ISR ile CMS değişikliklerini saniyeler içinde production’a yansıtmada avantajlıdır. Astro 4.0+ Content Collections, type-safe markdown/MDX yönetimi sağlar ve build time’da CMS verisi çekerek statik HTML üretir. CMS değişikliği sonrası rebuild gerektirir ancak Cloudflare Pages, Netlify gibi platformlarda webhook ile otomatize edilebilir.
Sonuç
Astro ve Next.js modern web geliştirmenin iki güçlü ancak farklı paradigmalı framework’üdür. Astro Islands Architecture ile content-driven sitelerde %45 LCP iyileşmesi ve 12 KB JavaScript bundle gibi olağanüstü performans metrikleri sunarken, Next.js App Router ve React Server Components ile uygulama-merkezli senaryolarda gelişmiş authentication, server actions ve ISR yetenekleri sağlar. Doğru seçim proje tipine (içerik vs uygulama), ekip yetkinliğine (React-only vs multi-framework) ve performans hedeflerine bağlıdır. Her iki framework’te de doğru kullanımla Core Web Vitals optimizasyonu ve SEO başarımı sağlanabilir, hatalı kararlar ise yıllık organik trafikte %18-25 kayba yol açabilir.
Ömer ÖNAL
Mayıs 17, 2026Astro’nun “zero JS by default” felsefesi içerik ağırlıklı siteler için Next.js’e göre %40-60 daha iyi LCP veriyor, ama interaktif dashboard’larda Next.js partial prerendering daha esnek. Karar kriteri: sayfa başına interaktif komponent sayısı 3’ten fazlaysa Next.js, değilse Astro.