Özet - Server Components

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.

Örnek çözümü göster

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;

Kendini test et

Aşağıdakilerden hangi yanlış?
- Client component'e fonksiyon geçilebilir
- 'use client' dosya bazında çalışır
- fetch sunucuda önbelleğe alınır
- Server component async olabilir
Cevabı göster

Client component'e fonksiyon geçilebilir — Fonksiyonlar serileştirilemez, geçilemez.

Boşluğu doldur: revalidate ile tazele

await fetch(url, { next: { revalidate: ____ } });

Cevabı göster

await fetch(url, { next: { revalidate: 60 } });

Kavramları eşleştir

Server Component

Sunucuda çizilir
'use client'

İstemciyi işaretler
await fetch

Sunucuda bekler
revalidate

Tazeleme süresi

Sıradaki ders: Streaming SSR nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler