Next.js SSR ve SSG Nedir? Hangisi Ne Zaman Kullanılır?

Next.js, geliştiricilerin hızlı ve SEO dostu web uygulamaları oluşturmasını sağlayan güçlü bir React framework'üdür. Onu öne çıkaran en önemli özelliklerden biri de esnek veri çekme stratejileridir — yani SSR (Server-Side Rendering) ve SSG (Static Site Generation). Bu yazıda, modern Next.js (App Router) standartlarıyla bu kavramların ne anlama geldiğini ve hangisini ne zaman seçmeniz gerektiğini inceleyeceğiz.

🧠 Server-Side Rendering (SSR) Nedir?

SSR ile bir sayfanın HTML çıktısı, her bir istek (request) geldiğinde sunucuda sıfırdan oluşturulur. Bu sayede veriler her zaman taze ve günceldir.

✅ Artıları:

• Her istekte anlık ve güncel veri sunar.
• Dinamik içerikler için SEO dostudur.
• Kullanıcıya özel (personalized) içeriklerle mükemmel uyum sağlar.

❌ Eksileri:

• Statik sayfalara göre yanıt süresi (TTFB) daha yavaştır.
• Sunucu üzerindeki yükü artırır.

🔧 Modern Next.js'te (App Router) SSR Kullanımı

Güncel App Router mimarisinde, önbelleğe alma (caching) yapmadığınız veya dinamik fonksiyonlar kullandığınız her sunucu bileşeni varsayılan olarak dinamiktir. İsterseniz bunu açıkça belirtebilirsiniz:

// app/products/page.tsx
import React from 'react';

// Her istekte sunucuda yeniden oluşturulmasını zorlar
export const dynamic = 'force-dynamic';

async function getProducts() {
  const res = await fetch('[https://api.example.com/products](https://api.example.com/products)', { cache: 'no-store' });
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div>
      <h1>Canlı Ürün Listesi (SSR)</h1>
      <ul>
        {products.map((p: any) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

---

🧊 Static Site Generation (SSG) Nedir?

SSG ile HTML, site derlendiği anda (build time) bir kez oluşturulur. Oluşturulan bu statik sayfa, gelen tüm isteklere anında servis edilir.

✅ Artıları:

• İnanılmaz hızlı sayfa yükleme süreleri sunar.
• Sunucuya bağımlılığı en aza indirir (CDN üzerinden kolayca sunulur).
• Bloglar, dokümantasyon ve pazarlama sayfaları için kusursuzdur.

❌ Eksileri:

• Site yeniden derlenene (rebuild) kadar içerikler eski (stale) kalır.
• Anlık veya kullanıcıya özel veriler için uygun değildir.

🔧 Modern Next.js'te (App Router) SSG Kullanımı

Next.js'te standart fetch istekleri varsayılan olarak önbelleğe alınır, bu da kutudan çıktığı gibi SSG desteği sunar:

// app/blog/page.tsx
import React from 'react';

async function getPosts() {
  // Varsayılan olarak önbelleklenir (SSG)
  const res = await fetch('[https://api.example.com/posts](https://api.example.com/posts)');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Statik Blog Yazıları (SSG)</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

---

🔄 Bonus: ISR (Incremental Static Regeneration)

Next.js, tüm siteyi yeniden derlemeden, statik sayfaların arka planda güncellenmesine olanak tanıyan ISR yapısını destekler.

async function getPosts() {
  const res = await fetch('[https://api.example.com/posts](https://api.example.com/posts)', {
    next: { revalidate: 60 }, // Her 60 saniyede bir arkaplanda yenile
  });
  return res.json();
}

---

🧪 Kullanım Senaryoları Karşılaştırması

Senaryo	Önerilen Strateji
Canlı stok takipli e-ticaret ürün sayfaları	SSR
Blog yazıları ve teknik dokümantasyonlar	SSG veya ISR
Kullanıcı panelleri ve profilleri	SSR (Dynamic)
Pazarlama ve tanıtım sayfaları (Landing pages)	SSG
Sık güncellenen haber içerikleri	ISR veya SSR

💡 Sonuç

SSR ve SSG arasında seçim yapmak tamamen verinizin karakterine bağlıdır. Kararsız kaldığınızda basit bir kural izleyin: İçerik sabitse SSG, verinin her tıklamada taze olması gerekiyorsa SSR kullanın. Modern Next.js ile her iki yaklaşımı tek projede harmanlamak artık çok kolay!