SSR nedir?
- React kursu
- İleri seviye
- Ders 5/56
- 4 dk
Sunucu taraflı çizim (SSR) kavramını öğrenirsin.
SSR nedir?
SSR (Server-Side Rendering), HTML'in sunucuda çizilip tarayıcıya hazır gönderilmesidir. Kullanıcı sayfayı açtığında içerik hemen görünür; JavaScript yüklenip "hydrate" olduktan sonra interaktif olur.
SSR, SEO ve ilk yükleme performansı için iyidir. Her istekte çizim yapıldığından dinamik içerikte kullanışlıdır.
Next.js App Router'da Server Components varsayılan SSR yapar.
Hydration
SSR ile sunucu HTML'i basar; tarayıcı ilk çizimi gösterir. Sonra JavaScript yüklenir ve React, event handler'ları bağlayarak sayfayı interaktif yapar. Bu adıma hydration denir.
Hydration öncesi sayfa görünür ama tıklamalar çalışmaz. Bu yüzden JavaScript hızlı yüklenmelidir.
Next.js otomatik hydration yapar; sen ek kod yazmazsın.
Uygulama Server Component yaz
Page bileşeni yaz: async olsun, fetch('https://api.example.com/data') ile veri çek, await r.json() ile JSON'a çevir. <main> içinde <h1>{data.title}</h1> bas. export default Page.
Başlangıç kodu
// app/page.js
// Page bileşenini buraya yaz (async)Örnek çözüm
// app/page.js
export default async function Page() {
const r = await fetch("https://api.example.com/data");
const data = await r.json();
return (
<main>
<h1>{data.title}</h1>
</main>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SSR'in temel avantajı nedir?
- SEO ve ilk yükleme Doğru cevap
- Tarayıcı önbelleği
- Daha az JavaScript
- Yalnız statik dosya
Açıklama: SSR SEO ve ilk yükleme performansı için iyidir.
2 Server component default
// app/page.js
export default function Page() {
// Bu bir ____ Component'tir; "use client" gerekmez
return <h1>Merhaba</h1>;
}// app/page.js
export default function Page() {
// Bu bir Server Component'tir; "use client" gerekmez
return <h1>Merhaba</h1>;
}Açıklama: App Router'da bileşenler varsayılan olarak Server'dır.
3 SSR nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
SSR |
Sunucu çizim |
hydrate |
JS bağlanır |
Server Component |
Varsayılan |
HTML |
İlk çıktı |