Son üç yılda SSR, CSR ve static site generator’la üç ayrı proje yaptım. Benzer ölçek, farklı modeller. Teorik karşılaştırmalar okudukça kafanın karışabilir, pratik sonuçları paylaşayım.
Proje A: Blog portalı, static site (Astro)
İçerik ağırlıklı, ayda 50-60 yazı. Editör Markdown yazıyor, git’e commit’liyor, CI build alıyor, CDN’e atıyor.
Sonuçlar:
– LCP: 1.1s (p75)
– TTFB: 80ms (CDN edge)
– Hosting maliyeti: 12 dolar/ay (Cloudflare Pages, pratik olarak sıfır)
– Build süresi: 40 saniye
– Editör deneyimi: teknik olmayan editör için zor. Markdown + git süreci öğrenme eğrisi.
Faydalar:
– Hız unbeatable. CDN’den servis ediliyor, server-side iş yok.
– Güvenlik yüksek. Runtime yok, hack edecek uygulama yok.
– Scale sorunsuz. 1000 visitor da, 100 bin visitor da aynı performans.
Dezavantajlar:
– Yorum/form gibi dinamik özellikler için üçüncü taraf (Disqus, Formspree).
– İçerik değiştikçe build + deploy. 5 dakikada güncellenen bir site değil.
– Kişiselleştirme zor. Her kullanıcıya farklı içerik gösteremezsiniz.
Proje B: Dashboard SPA (React + API, CSR)
Kullanıcı girişli, kişiye özel, sürekli değişen veri. Grafik ağırlıklı dashboard.
Sonuçlar:
– LCP: 2.8s (p75, ilk yükleme)
– TTFB: 120ms (API)
– Hosting maliyeti: 80 dolar/ay (Vercel + backend VPS)
– Bundle size: 380 KB gzipped
– Editör deneyimi: uygulama içi admin panel, developer olmayan admin çalışabiliyor.
Faydalar:
– İlk yükleme sonrası sayfalar arası geçiş anlık. Client-side routing.
– İnteraktif, reactive. Kullanıcı etkileşimine anında cevap.
– Backend API herhangi bir client’ı (web + mobile) servis edebiliyor.
Dezavantajlar:
– İlk yükleme yavaş. JS bundle indirmeden ekran boş.
– SEO zor. Search engine JS render etse bile gecikme ekliyor.
– Karmaşık state management. Redux, Zustand gibi kütüphaneler şart oluyor.
Proje C: E-ticaret (Next.js SSR)
SEO kritik, kişiselleştirme gerekli, binlerce ürün sayfası.
Sonuçlar:
– LCP: 1.6s (p75)
– TTFB: 230ms (edge + ISR)
– Hosting maliyeti: 250 dolar/ay (Vercel + PostgreSQL)
– Build süresi: 12 dakika (ISR ile ilk deploy sonrası incremental)
– Editör deneyimi: WordPress headless back-end, editör alıştığı şekilde içerik üretiyor.
Faydalar:
– SEO mükemmel. İlk HTML cevabında tüm içerik var.
– Kişiselleştirme mümkün. Login durumuna göre render değişiyor.
– Hidrasyon sonrası SPA gibi interaktif.
– ISR (Incremental Static Regeneration) ile static’in hızı + dinamik içerik.
Dezavantajlar:
– Hosting maliyeti yüksek. Her request server-side iş yaptırıyor.
– Build pipeline karışık. Next.js runtime, edge function, ISR cache invalidation düşünmek lazım.
– Cold start. Serverless deploy’da ilk istek 500ms+ bekler.
– Debug karmaşık. Client, server, edge üç yerde kod çalışıyor.
Karar matrisi
Kendi kullandığım tablo:
| Kriter | Static | SSR | CSR |
| — | — | — | — |
| İlk yükleme hızı | Mükemmel | İyi | Orta |
| SEO | Mükemmel | Mükemmel | Zor |
| İnteraktivite | Düşük | Yüksek | Yüksek |
| Kişiselleştirme | Yok | Var | Var |
| Hosting maliyeti | Çok düşük | Yüksek | Orta |
| Editör deneyimi | Geliştirici gibi | İyi (headless CMS) | İyi (admin panel) |
| Build complexity | Düşük | Yüksek | Orta |
| Ölçekleme | Trivial | Dikkatli | Orta |
Karma mimariler
Gerçekte çoğu proje karma. Astro statik sayfalar + React islet’ler. Next.js static export + dynamic routes. Bu karmaşa önemli.
Benim favori: içerik ağırlıklı sayfalar static (blog, landing, dokümantasyon), dinamik sayfalar SSR (user dashboard, e-ticaret), interaktif parçalar CSR (islands mimari).
Karar kriterleri
Bu soruları sorun:
- İçerik ne sıklıkta değişiyor? Dakika → SSR, saat → ISR, gün → static + incremental build.
- SEO kritik mi? Evet → static veya SSR. Hayır → CSR rahat.
- Kişiselleştirme var mı? Evet → SSR veya CSR. Hayır → static.
- Hosting bütçesi nasıl? Düşük → static tercih.
- Teknik olmayan editör var mı? Evet → CMS + SSR genelde en iyi.
- Mobile app da var mı? Backend paylaşımı gerekiyorsa CSR.
Sonuç
Modeli seçmek modanın değil, projenin işi. “Next.js / Astro / Gatsby / Remix en iyisi” diye tek bir cevap yok. Her birinin hitap ettiği senaryo var, karar matrisinde kendinize uyana bakın.