SSG nedir?

Derleme zamanı çizim (SSG) kavramını öğrenirsin.

SSG nedir?

SSG (Static Site Generation), sayfanın build sırasında bir kez çizilip statik HTML olarak saklanmasıdır. Her istekte aynı HTML gönderilir; sunucu ek iş yapmaz.

SSG, nadir değişen içerikler için en hızlı seçenektir. Blog yazıları, pazarlama sayfaları ve dokümanlar SSG'ye uygundur.

Next.js App Router'da generateStaticParams ile dinamik rotalar da statik üretilebilir.

generateStaticParams

Dinamik rotalarda generateStaticParams fonksiyonu build sırasında hangi parametrelerin statik üretileceğini söyler. Örneğin app/blog/[slug]/page.js içinde bir liste döndürürsün.

Her eleman bir { params: { slug: '...' } } nesnesidir. Next.js her slug için bir HTML üretir.

İlk istek hazır HTML'i alır; başka bir şey gerekmez.

Uygulama Statik blog sayfası

generateStaticParams fonksiyonu yaz: [{ params: { slug: 'react' } }, { params: { slug: 'css' } }] döndürsün. Page bileşeni yaz: { params } propunu destructure et, <h1>{params.slug}</h1> bas. export default Page.

Örnek çözümü göster

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  return [
    { params: { slug: "react" } },
    { params: { slug: "css" } }
  ];
}

export default function Page({ params }) {
  return <h1>{params.slug}</h1>;
}

Kendini test et

SSG ne zaman tercih edilir?
- Her istekte farklı veri
- Nadir değişen içerik
- Kullanıcıya özel veri
- Anlık canlı veri
Cevabı göster

Nadir değişen içerik — SSG nadir değişen içerik için uygundur.

Static params return

export async function generateStaticParams() {
  return [
    { params: { slug: '____' } },
    { params: { slug: 'ikinci' } }
  ];
}

Cevabı göster

export async function generateStaticParams() {
  return [
    { params: { slug: 'ilk' } },
    { params: { slug: 'ikinci' } }
  ];
}

SSG nedir: kavramları eşleştir

SSG

Build sırasında
generateStaticParams

Statik rotalar
HTML

Statik çıktı
blog

Tipik SSG

Sıradaki ders: Server Components

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler