Meydan okuma: Server bileşenli sayfa
- React kursu
- Uzman seviye
- Ders 29/32
- 6 dk
Server bileşeniyle ürünleri çekip client bileşenine aktaran sayfa yazarsın.
Meydan okuma: Server bileşenli sayfa
Bu meydan okumada async bir server component sayfa yazacaksın. await fetch ile veri çekip HTML olarak döndürmen gerekiyor.
Sayfa bir article etiketi içinde başlık gösterir. Veri sunucuda çekilir; istemci paketine girmez. API anahtarı sunucuda kalır; istemciye sızmaz. İlk çizim hızlı olur.
Uygulama ArticlePage server bileşenini yaz
ArticlePage server bileşeni yaz. id özelliği alsın. async function. await fetch(`/api/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(`/api/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 Server component nasıl veri çeker?
- async fonksiyonda await fetch ile Doğru cevap
- useEffect ile
- setInterval ile
- addEventListener ile
Açıklama: Server component async olarak await fetch kullanır.
2 Boşluğu doldur: async fonksiyon
async function ArticlePage({ id }) {
const res = await ____(`/api/articles/${id}`);
const article = await res.json();
return <article><h1>{article.title}</h1></article>;
}async function ArticlePage({ id }) {
const res = await fetch(`/api/articles/${id}`);
const article = await res.json();
return <article><h1>{article.title}</h1></article>;
}Açıklama: await fetch ile istek yapılır.