Veri çekme RSC'de

Server bileşeninde doğrudan async veri çekmeyi öğrenirsin.

Veri çekme RSC'de

Server Components'te veri çekmek için async fonksiyon yazıp await fetch() kullanırsın. İstek sunucuda çalıştığı için API anahtarı istemciye sızmaz.

Next.js fetch çağrılarını önbelleğe alır; aynı veriyi tekrar istemek yerine önbellekten döner. cache: 'no-store' ile dinamik veri, next: { revalidate: 60 } ile 60 saniyelik tazeleme ayarlanır.

Veri çekme artık useEffect ile değil, doğrudan bileşende yapılır.

Önbellek ve yeniden doğrulama

Next.js, fetch çağrılarını otomatik önbelleğe alır. Aynı URL'ye yapılan istekler tek bir istek olarak birleşir; bu request memoization olarak bilinir.

Veri önbelleği (data cache) URL başınadır; revalidate süresi dolunca arka planda yeniden çekilir. Eski veri hemen gösterilir, yeni veri hazırlanınca değişir.

Bu yaklaşım hem hızlı ilk çizim hem de güncel veri sağlar.

Uygulama UserProfile server bileşenini yaz

UserProfile server bileşeni yaz. id özelliği alsın. async function. await fetch(`https://api.example.com/users/${id}`) ile veri çek, res.json() ile çöz. <h1>{user.name}</h1> döndür. Dışa aktar.

Örnek çözümü göster

async function UserProfile({ id }) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  const user = await res.json();
  return <h1>{user.name}</h1>;
}
export default UserProfile;

Kendini test et

Veri çekme seçeneklerini eşleştir

cache: 'no-store'

Dinamik veri
next: revalidate: 60

60 sn tazele
await fetch

Sunucuda bekler
res.json()

JSON'a çöz
RSC'de veri çekme nasıl yapılır?
- useEffect içinde fetch ile
- addEventListener ile
- setInterval ile
- async bileşende await fetch ile
Cevabı göster

async bileşende await fetch ile — Server component'ler async olarak await fetch kullanır.

Boşluğu doldur: dinamik veri

const res = await fetch('/api/news', { cache: '____' });

Cevabı göster

const res = await fetch('/api/news', { cache: 'no-store' });

Sıradaki ders: Özet - Server Components

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler