Özet - Server Components
- React kursu
- Uzman seviye
- Ders 8/32
- 5 dk
Bir server bileşeniyle ürünleri çekip bir client bileşenine aktarırsın.
Özet - Server Components
Bu grupta Server Components'in ne olduğunu, client-server ayrımını ve RSC'de veri çekmeyi öğrendin.
Server component'ler sunucuda çizilir, veriyi doğrudan çeker ve HTML gönderir. 'use client' ile interaktif parçalar istemciye taşınır. Fonksiyon geçilemez; veri özellik olarak akar.
Şimdi bir server bileşeni yazacaksın.
Uygulama ArticlePage server bileşenini yaz
ArticlePage server bileşeni yaz. id özelliği alsın. async function. await fetch(`https://api.example.com/articles/${id}`) ile çek, res.json() ile çöz. <article><h1>{article.title}</h1></article> döndür. Dışa aktar.
Başlangıç kodu
// ArticlePage server bileşenini buraya yazÖrnek çözüm
async function ArticlePage({ id }) {
const res = await fetch(`https://api.example.com/articles/${id}`);
const article = await res.json();
return (
<article>
<h1>{article.title}</h1>
</article>
);
}
export default ArticlePage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangi yanlış?
- Client component'e fonksiyon geçilebilir Doğru cevap
- 'use client' dosya bazında çalışır
- fetch sunucuda önbelleğe alınır
- Server component async olabilir
Açıklama: Fonksiyonlar serileştirilemez, geçilemez.
2 Boşluğu doldur: revalidate ile tazele
await fetch(url, { next: { revalidate: ____ } });await fetch(url, { next: { revalidate: 60 } });Açıklama: revalidate saniye olarak sayı alır.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Server Component |
Sunucuda çizilir |
'use client' |
İstemciyi işaretler |
await fetch |
Sunucuda bekler |
revalidate |
Tazeleme süresi |