Meydan okuma: Server bileşenli sayfa

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.

Örnek çözümü göster

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;

Kendini test et

Server component nasıl veri çeker?
- async fonksiyonda await fetch ile
- useEffect ile
- setInterval ile
- addEventListener ile
Cevabı göster

async fonksiyonda await fetch ile — Server component async olarak await fetch kullanır.

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>;
}

Cevabı göster

async function ArticlePage({ id }) {
  const res = await fetch(`/api/articles/${id}`);
  const article = await res.json();
  return <article><h1>{article.title}</h1></article>;
}

Sıradaki ders: Meydan okuma: Concurrent arama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler