Next.js SSR Nedir? Server-Side Rendering Nasıl Çalışır?

SSR (Server-Side Rendering / sunucu taraflı render), bir sayfanın HTML’inin kullanıcı her istek attığında sunucuda üretilip tarayıcıya hazır olarak gönderilmesidir. Next.js’te bu varsayılan davranışa çok yakındır: App Router’daki her sayfa bir Server Component olarak sunucuda render edilir; veriyi çekerken önbellek ayarını değiştirerek sayfayı SSR, SSG veya ISR moduna alırsınız. Sonuç: kullanıcı ve arama motoru, JavaScript’in yüklenmesini beklemeden içeriği dolu bir HTML görür. Bu da hem hız hem SEO demektir — kurumsal web geliştirme projelerimizde Next.js’i tercih etmemizin ana nedeni budur.

SSR Nasıl Çalışır?

Klasik bir React (CSR — client-side rendering) uygulamasında tarayıcıya neredeyse boş bir HTML ve büyük bir JavaScript paketi gider; içerik, JavaScript çalıştıktan sonra ekranda belirir. SSR’de bu sıra tersine döner: istek sunucuya gelir, sunucu veriyi çeker, React bileşenlerini HTML’e dönüştürür ve tarayıcıya içeriği hazır bir sayfa gönderir. Tarayıcı bu HTML’i anında gösterir; ardından JavaScript yüklenir ve sayfayı etkileşimli hale getirir (hydration).

• Kullanıcı /urunler sayfasına istek atar.
• Sunucu veritabanından veya API’den güncel veriyi çeker.
• React bileşenleri sunucuda HTML’e render edilir.
• Tarayıcı, içeriği dolu HTML’i anında gösterir (hızlı LCP).
• JavaScript arka planda yüklenir, sayfa etkileşimli olur.

SSR’in en kritik faydası ilk yükleme hızıdır: kullanıcı boş ekran yerine ilk milisaniyelerde gerçek içerik görür. Google’ın Core Web Vitals metriklerinden LCP doğrudan bundan etkilenir.

SSR, SSG, ISR ve CSR Arasındaki Fark

Next.js’in gücü tek bir render stratejisine kilitlenmemenizdir; sayfa bazında seçim yaparsınız. Dört stratejinin farkı, HTML’in ne zaman üretildiğidir:

• SSR (sunucuda, her istekte): İçerik her istekte taze üretilir. Kişiye özel paneller, fiyatın anlık değiştiği sayfalar için ideal.
• SSG (build sırasında, bir kez): HTML, site derlenirken üretilir ve CDN’den servis edilir. Blog ve kurumsal tanıtım sayfaları için en hızlı seçenek.
• ISR (build + periyodik yenileme): SSG hızı + belirli aralıklarla arka planda güncelleme. Ürün listeleri ve haber siteleri için dengeli çözüm.
• CSR (tarayıcıda): HTML tarayıcıda JavaScript ile oluşturulur. Giriş gerektiren, SEO’nun önemsiz olduğu uygulama içi ekranlar için uygundur.

Next.js’te SSR Nasıl Kullanılır? (Kod Örneği)

App Router’da bir sayfayı SSR yapmak için ayrı bir API öğrenmenize gerek yok; Server Component içinde veri çekerken önbelleği kapatmanız yeterli:

// app/urunler/page.tsx — her istekte sunucuda render edilir (SSR)
export default async function UrunlerPage() {
  const res = await fetch('https://api.ornek.com/urunler', {
    cache: 'no-store', // SSR: her istekte taze veri
    // alternatif: next: { revalidate: 60 } → ISR (60 sn'de bir yenile)
  });
  const urunler = await res.json();

  return (
    <main>
      <h1>Ürünler</h1>
      <ul>
        {urunler.map((u: { id: string; ad: string }) => (
          <li key={u.id}>{u.ad}</li>
        ))}
      </ul>
    </main>
  );
}

cache: no-store ayarı sayfayı SSR moduna alır; aynı satırı next: { revalidate: 60 } ile değiştirirseniz sayfa ISR’a döner. Pages Router kullanan eski projelerde aynı iş getServerSideProps fonksiyonuyla yapılır — App Router’a geçiş bu yüzden hem kodu sadeleştirir hem esneklik kazandırır.

SSR Ne Zaman Tercih Edilmeli?

SSR her sayfa için doğru cevap değildir; sunucu her istekte çalıştığı için maliyeti SSG/ISR’dan yüksektir. Pratik kural şudur: içerik kişiye veya ana göre değişiyorsa SSR, herkese aynıysa SSG/ISR kullanın. Kullanıcı paneli, sepet, anlık stok/fiyat gösteren sayfalar SSR ister; hakkımızda, hizmet ve blog sayfaları SSG/ISR ile hem daha hızlı hem daha ucuz çalışır. WordPress gibi geleneksel sistemlerle bu sayfa bazlı esnekliği kuramazsınız — bu karşılaştırmayı WordPress mi Next.js mi? yazısında ayrıntılı ele almıştık.

SSR’in SEO’ya Etkisi

Arama motorları ve yapay zeka tabanlı cevap motorları (ChatGPT, Perplexity, Gemini) sayfanızı taradığında içeriği dolu HTML görmek ister. CSR’de içerik JavaScript sonrası geldiği için indeksleme gecikebilir veya eksik kalabilir; SSR/SSG’de ise tarayıcıya giden ilk yanıt zaten tam içeriktir. Başlık, açıklama ve yapılandırılmış veri (JSON-LD) de sunucuda üretildiği için her sayfa doğru metadata ile yayınlanır. Bu konunun uygulama tarafını Next.js SEO nasıl yapılır? rehberinde adım adım anlattık.

Sonuç

SSR, Next.js’in sunduğu render stratejilerinden biridir: HTML her istekte sunucuda üretilir, kullanıcı ve arama motoru içeriği anında görür. Doğru kullanım, sayfa bazında SSR/SSG/ISR seçimi yapmaktır — dinamik sayfalara SSR, statik sayfalara SSG/ISR. Projenizde hangi stratejinin doğru olduğundan emin değilseniz web geliştirme ekibimizle iletişime geçin ya da doğrudan teklif alın; mimari kararı birlikte verelim.