Next.js'de SSR, SSG ve ISR nedir?

Question

Accepted Answer

Bunlar bir sayfanın HTML'sinin *ne zaman* oluşturulduğu için üç ana stratejidir. Her sayfa için doğru olanı seçmek tazelik, performans ve sunucu maliyetini dengeler. ## SSG — Static Site Generation (derleme zamanında) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` Sayfa derleme sırasında statik HTML'ye önceden dönüştürülür ve bir CDN'de önbelleğe alınır. **Mümkün olan en hızlı** teslim, ancak içerik bir sonraki derlemeye kadar dondurulur. İçeriği nadiren değişen şeyler için en iyisi: pazarlama sayfaları, belgeler, blog gönderileri. ## SSR — Server-Side Rendering (her istekte) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` Sunucu her istek için sayfayı dönüştürür, bu nedenle veriler her zaman günceldir — daha yavaş yanıtlar ve her ziyarette sunucu yüküyle gelen bir maliyetle. Kişiselleştirilmiş veya her zaman güncel veriler için en iyisi: pano, hesap sayfaları, arama sonuçları. ## ISR — Incremental Static Regeneration (hibrit) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR statik HTML (hızlı, CDN'de önbelleğe alınmış) sunar ancak zamanlamaya göre arka planda **yeniden doğrular** — bu sayede tüm siteyi yeniden oluşturmadan statik performans ve periyodik olarak güncel veriler alırsınız. Arada sırada değişen içerik için en iyisi: ürün listeleri, haberler, liderlik tabloları. ## Karşılaştırma ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## Neden önemli App Router'da özel işlevler yerine önbellek seçenekleri (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) aracılığıyla her getirme için bunları seçersiniz. Dengeyi anlamak — statik en hızlı ama eski, SSR güncel ama pahalı, ISR her ikisini de dengeliyor — her sayfayı performans ve veri tazeliğinin doğru karışımı için optimize etmenize olanak tanır.