Veri çekme RSC'de
- React kursu
- Uzman seviye
- Ders 7/32
- 4 dk
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.
Başlangıç kodu
// UserProfile server bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Veri çekme seçeneklerini eşleştir
| Kavram | Anlamı |
|---|---|
cache: 'no-store' |
Dinamik veri |
next: revalidate: 60 |
60 sn tazele |
await fetch |
Sunucuda bekler |
res.json() |
JSON'a çöz |
2 RSC'de veri çekme nasıl yapılır?
- useEffect içinde fetch ile
- addEventListener ile
- setInterval ile
- async bileşende await fetch ile Doğru cevap
Açıklama: Server component'ler async olarak await fetch kullanır.
3 Boşluğu doldur: dinamik veri
const res = await fetch('/api/news', { cache: '____' });const res = await fetch('/api/news', { cache: 'no-store' });Açıklama: cache: 'no-store' her istekte taze veri verir.