SSG nedir?
- React kursu
- İleri seviye
- Ders 6/56
- 4 dk
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.
Başlangıç kodu
// app/blog/[slug]/page.js
// generateStaticParams ve Page buraya yazÖrnek çözüm
// 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>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SSG ne zaman tercih edilir?
- Her istekte farklı veri
- Nadir değişen içerik Doğru cevap
- Kullanıcıya özel veri
- Anlık canlı veri
Açıklama: SSG nadir değişen içerik için uygundur.
2 Static params return
export async function generateStaticParams() {
return [
{ params: { slug: '____' } },
{ params: { slug: 'ikinci' } }
];
}export async function generateStaticParams() {
return [
{ params: { slug: 'ilk' } },
{ params: { slug: 'ikinci' } }
];
}Açıklama: generateStaticParams parametre listesi döndürür.
3 SSG nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
SSG |
Build sırasında |
generateStaticParams |
Statik rotalar |
HTML |
Statik çıktı |
blog |
Tipik SSG |