Render stratejileri: SSR, SSG, ISR ve istemci tarafı render karşılaştırması

Kısaca: Bir web sayfası derleme zamanında (SSG), her istekte (SSR), periyodik olarak yeniden (ISR) veya tarayıcıda (CSR) üretilebilir; seçim hızı, tazeliği, maliyeti ve arama motoru uygunluğunu etkiler.

Biraz daha ayrıntılı: Soru şudur: HTML ne zaman ve nerede oluşur? Next.js gibi çerçeveler bunu sayfa başına seçmene izin verir.

Ayrıntılı

Stratejiler

• SSG (statik site üretimi): HTML derleme zamanında üretilir ve bir CDN üzerinden sunulur. Çok hızlı, ucuz, güvenli; ancak yalnızca son derleme kadar günceldir. Blog, belgeler, wiki, açılış sayfaları için ideal.
• SSR (sunucu tarafı render): sunucu HTML’i her istekte üretir; her zaman güncel ve kişiselleştirilebilir (çerezler), ancak daha yavaş ve daha pahalı (hesaplama süresi, muhtemelen veri tabanı).
• ISR (artımlı statik yeniden üretim): süre sonu olan statik sayfa (revalidate: 3600); süre dolunca arka planda yeniden derlenir. Listeler, mağazalar, haberler için iyi bir uzlaşma.
• CSR (istemci tarafı render): tarayıcı JavaScript’i yükler ve sayfayı oluşturur; girişin arkasındaki panolar için iyi, ilk yükleme süresi ve SEO için daha kötü.
• Streaming/Suspense: sayfa parçalar hâlinde sunulur; önemli şeyler önce görünür.

Karar yardımcısı

Gereksinim	Seçim
Nadiren değişen içerik, çok trafik	SSG
İçerik her dakika/saat değişir	ISR
Kullanıcıya göre farklı (sepet, profil)	SSR veya CSR
Girişin arkasında, etkileşimli	CSR (veya SSR + istemci bileşenleri)
SEO önemli	SSG/ISR/SSR

Hibritler normaldir: statik kabuk, dinamik kısımlar streaming veya istemci sorgusuyla.

Etkiler

• Veri tabanı yükü: SSR/ISR onu sorgular; önbellekleme (bkz. unstable_cache, revalidate) ve uzun süre sonu süreleriyle yük keskin biçimde düşer, özellikle boştayken duran ve hesaplama süresi faturalayan sunucusuz veri tabanlarında.
• Maliyet ve hız: statik sayfaların CDN ile sunumu en ucuzudur.
• Dayanıklılık: statik sayfalar veri tabanına ulaşılamasa bile çalışmaya devam eder; bu yüzden derlemeler veri tabanına bağımlı olmamalı ya da hataları yakalamalıdır.
• Tazelik: isteğe bağlı yeniden doğrulama (etiketler/yollar) ile değişikliklerden sonra hedefli yeniden derleyebilirsin.

Uygulama

Statik başla, gerektiği yerde dinamik ekle. Lighthouse/Core Web Vitals ile ölç (LCP, CLS, INP). Önbellek başlıklarını uygun ayarla. Veri tabanı kesintisinde ve soğuk başlatmalarda davranışı test et. Next.js’te: export const revalidate = 3600, dynamic = 'force-dynamic', generateStaticParams, fetch ve önbellek seçenekleriyle sunucu bileşenleri (sürümünün belgelerine bak, API değişir).

Ayrıca bak: Next.js App Router, Önbellekleme stratejileri, Cache tag’leri ve revalidateTag, Lighthouse ve Core Web Vitals, Sunucusuz