Server bileşenli sayfa

Server bileşeniyle veri çeken bir sayfa yazarsın.

Server bileşenli sayfa

Üçüncü adımda bir server component sayfa yazacaksın. ProductPage async bir fonksiyondur ve await fetch ile ürünleri çeker.

Başlangıç kodu, Button ve ThemeProvider çözümlerini içerir; böylece tasarım sistemi ve tema hazır. Sayfa, sunucuda çizilir ve HTML olarak istemciye gider.

Ürünler bir <ul> içinde listelenir; her biri key ile izlenir.

İstemci bileşenle birleştirme

Server component'ten istemci bileşenine veri özellik olarak geçilir. Örneğin <Button variant="primary">Satın al</Button> bir client bileşendir; ama ProductPage içinde kullanılabilir.

Bu ayrım, veri çekmenin sunucuda, etkileşimin istemcide olmasını sağlar. Paket küçük, ilk çizim hızlı kalır.

children olarak da istemci bileşen geçilebilir.

Uygulama ProductPage server bileşenini yaz

ProductPage server bileşeni yaz. async function ProductPage(). await fetch('/api/products') ile çek, res.json() ile çöz. <main> içinde <h1>Ürünler</h1> ve <ul> içinde products.map(p => <li key={p.id}>{p.name}</li>). Dışa aktar.

Örnek çözümü göster

async function ProductPage() {
  const res = await fetch('/api/products');
  const products = await res.json();
  return (
    <main>
      <h1>Ürünler</h1>
      <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
    </main>
  );
}
export default ProductPage;

Kendini test et

Server component kavramlarını eşleştir

async function

Sunucuda veri çeker
await fetch

Veriyi bekler
res.json

JSON'a çöz
products.map

Listeyi çiz
ProductPage hangi tür bileşendir?
- Client component
- Edge component
- Shared component
- Server component (async)
Cevabı göster

Server component (async) — ProductPage async bir server component'tir.

Boşluğu doldur: ürünleri listele

<ul>{products.map(p => <li ____={p.id}>{p.name}</li>)}</ul>

Cevabı göster

<ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>

Sıradaki ders: Concurrent özellikler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler