Özet - SSR ve SSG
- React kursu
- İleri seviye
- Ders 8/56
- 5 dk
Statik bir ana sayfa ve dinamik bir ürün sayfası kurarsın.
Özet - SSR ve SSG
Bu grupta SSR, SSG ve Server Components'i gördün. SSR her istekte sunucuda çizim yapar; SSG build sırasında bir kez çizip statik HTML üretir. RSC ise JavaScript göndermeden sunucuda çalışır.
İnteraktif öğeler için "use client" direktifi ile Client Component oluşturursun. Sunucu ve istemci ayrımı, JavaScript'i küçük tutar.
Şimdi bir karma sayfa yaz: Server Component + Client Counter birlikte.
Uygulama Karma sayfa
Page bileşeni yaz (Server Component): async olsun, await fetch('https://api.example.com/post') ile veri çek, JSON'a çevir, <article><h1>{data.title}</h1></article> bas. Ayrıca Counter Client Component'ini import et ve <Counter /> bas. export default Page. Import ifadesini de yaz: import Counter from "./counter".
Başlangıç kodu
// app/page.js
// counter.js'den Counter'ı içe aktar
// Page bileşenini buraya yaz (async, Server Component)Örnek çözüm
// app/page.js
import Counter from "./counter";
export default async function Page() {
const r = await fetch("https://api.example.com/post");
const data = await r.json();
return (
<article>
<h1>{data.title}</h1>
<Counter />
</article>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi senaryo SSG'ye en uygun?
- Kullanıcıya özel sepet
- Anlık sohbet mesajları
- Canlı stok verisi
- Build sırasında bilinen blog yazıları Doğru cevap
Açıklama: Blog yazıları build sırasında biliniyorsa SSG'ye uyar.
2 Client directive
// app/like.js
"____"
import { useState } from "react";
export default function Like() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}// app/like.js
"use client"
import { useState } from "react";
export default function Like() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Açıklama: "use client" interaktif bileşenleri işaretler.