Server-Side Rendering vs Static Generation: Hangisi Sizin İçin?

Modern web framework'leri size birden fazla render stratejisi sunar: Static Site Generation (SSG), Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), Client-Side Rendering (CSR) ve karışım modeller. Hepsi kulağa benzer geliyor; ama her birinin kendine özgü avantajı, dezavantajı ve ideal kullanım senaryosu var.

SSG: Build zamanında üretim

Static Site Generation'da sayfalar build zamanında HTML olarak oluşturulur. Bir kullanıcı geldiğinde sunucu sadece dosyayı sunar — hiçbir hesaplama yok, hiçbir veritabanı sorgusu yok. Sonuç: muhteşem hız, mükemmel cache, neredeyse sıfır sunucu maliyeti.

Hangi sayfalar için ideal? Blog yazıları, dokümantasyon, ürün katalogları (içeriği sık değişmeyen), pazarlama sayfaları. CDN üzerinden dünya çapında dağıtılabilir.

Dezavantajı? İçerik değiştiğinde tekrar build etmek gerek. 10.000 sayfalık bir site için bu dakikalar sürebilir.

SSR: İstek zamanında üretim

Server-Side Rendering'de her HTTP isteğinde sunucu sayfayı dinamik olarak oluşturur. Kullanıcının diline, oturum durumuna, konumuna göre farklı içerik gösterebilirsiniz.

İdeal kullanım: kullanıcıya özel içerik (e-ticaret sepeti, hesap dashboard'u), gerçek zamanlı veri (borsa fiyatları, canlı skor), kişiselleştirilmiş öneri sistemleri.

Dezavantajı? Her istek sunucu kaynağı tüketir. Trafik artarsa sunucu maliyetiniz de artar. Cache ile bu durum yumuşatılabilir.

ISR: İkisinin arası

Incremental Static Regeneration, SSG'nin avantajlarını korur ama içeriği belirli aralıklarla yeniden oluşturur. Örneğin bir blog yazısını her saat başı arka planda yeniden render etmek.

Bu, "büyük çoğunluk için statik hızı, içerik güncellemeleri için otomatik tazelik" sunar. Next.js'in en güçlü özelliklerinden biri.

İdeal kullanım: ürün sayfaları (fiyat değişebilir), haber siteleri, blog'lar (yorumlar dahil edilirse).

On-demand revalidation

Klasik ISR'de sayfa belirli aralıklarla yenilenir. On-demand revalidation ile siz programatik olarak "şu sayfayı şimdi yenile" diyebilirsiniz. Örneğin admin panelinden bir ürün güncellendiğinde, ilgili sayfaları anında yenilemek için.

Bu, blog veya CMS güncellemeleri ile mükemmel uyum sağlar. WordPress webhook'undan tetiklenen Next.js revalidation tipik bir senaryo.

CSR: Tarayıcıda render

Client-Side Rendering, eski usul React SPA'lar gibi tüm render'ı tarayıcıya bırakır. SEO açısından kötü, ilk yükleme yavaş; ama gerçekten interaktif uygulamalar için (örneğin Figma, Notion gibi araçlar) hâlâ yer var.

Karışım modeller

Modern uygulamalarda tek bir strateji yetmez. Anasayfa SSG, ürün listesi ISR, sepet SSR, dashboard CSR olabilir. Next.js App Router bu seçimi sayfa bazında yapmanıza olanak tanır.

Maliyet ve operasyon farkı

SSG: CDN'den sunulur, sunucu yok denecek kadar az maliyet (ayda 5-20 USD).

SSR: Sürekli çalışan sunucular gerektirir. PM2 + NGINX ile bir VPS yeterli olabilir, ama trafik arttıkça yatay ölçeklenme gerekir (50-200 USD/ay).

ISR: SSG ile aynı maliyet profili; tek fark sunucunun arada bir build çalıştırması.

Sonuç

Tek bir doğru cevap yok. Sayfa bazında karar verin: bu sayfayı saniyede kaç kişi ziyaret ediyor, içeriği ne kadar sıklıkta değişiyor, kişiselleştirme gerekiyor mu. Bu sorulara verdiğiniz cevap, doğru render stratejisini söyler.