React Academy · Ders

Next.js'te Önbellek Seçenekleriyle fetch()

Önbelleğe alma davranışını denetlemek için fetch üzerinde force-cache, no-store ve revalidate seçeneklerini kullanın.

Next.js'te Önbellek Seçenekleriyle fetch(), CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Next.js'te Genişletilmiş Veri Alma

Next.js, yerel fetch() API'sini önbellekleme ve yeniden doğrulama denetimi için bir next seçeneğiyle genişletir. Bu özellik yalnızca Sunucu Bileşenlerinde ve rota işleyicilerinde çalışır.

Önbelleği Zorla (Varsayılan)

Varsayılan olarak Next.js'teki fetch(), force-cache kullanır; yanıtı süresiz olarak önbelleğe alır ve açıkça yeniden doğrulanana kadar tüm isteklerde yeniden kullanır.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

Önbelleksiz — Her Zaman Güncel

no-store, önbelleğe almayı tamamen devre dışı bırakır. Her istek kaynak sunucuya ulaşır. Kişiselleştirilmiş veya hassas veriler için kullanın.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — Zamana Dayalı ISR

next.revalidate seçeneği yanıtı önbelleğe alır ancak arka planda her N saniyede bir yeniden doğrular (eski veriyi sunarken yeniden doğrulama yaklaşımı).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

Segment Düzeyinde revalidate

Bu segmentteki tüm veri alma işlemlerine bir yeniden doğrulama aralığı uygulamak için bir sayfadan veya düzenden revalidate sabitini dışa aktarın.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Etiket Tabanlı Yeniden Doğrulama

next.tags ile bir veri alma çağrısına etiketler atayın. İsteğe bağlı olarak etiketlenmiş tüm önbellekleri geçersiz kılmak için bir Sunucu Eyleminde veya rota işleyicisinde revalidateTag(tag) kullanın.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path), belirli bir URL yolu için önbelleği geçersiz kılar ve bir sonraki istekte yeniden oluşturulmasını sağlar.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Dinamik İşlevlerle Önbellekten Çıkma

Bir sayfada cookies(), headers() çağrısı yapmak veya searchParams okumak sayfayı dinamik hâle getirir; bu sayfa için önbelleklemeden tamamen çıkar.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Yinelemeleri Önleme

Next.js, tek bir oluşturma geçişi içindeki aynı veri alma çağrılarını yinelenmekten korur; iki Sunucu Bileşeni aynı URL'den veri alırsa yalnızca bir HTTP isteği yapılır.

İstek Notlandırması ve Önbellek

İki önbellek katmanı vardır: İstek Notlandırması (istek başına yinelemeleri otomatik olarak önler) ve Veri Önbelleği (kalıcıdır, önbellekleme/yeniden doğrulama seçenekleriyle denetlenir).

Önbellek Davranışında Hata Ayıklama

next build komutunu çalıştırın ve derleme çıktısını denetleyin; her rota oluşturma stratejisini gösterir: Statik (önbelleğe alınmış), Dinamik (önbelleksiz) veya ISR (yeniden doğrulama aralığı).

Hızlı Kontrol

Nadiren değişen ancak tam bir yeniden dağıtım yapılmadan güncellenmesi gereken veriler için hangi fetch önbellek seçeneğini kullanmalısınız?

Özet

Statik veriler için cache: 'force-cache', her zaman güncel veriler için cache: 'no-store' ve ISR için next: { revalidate: N } kullanın. Veri alma işlemlerini next.tags ile etiketleyin ve isteğe bağlı geçersiz kılma için revalidateTag() çağırın. Dinamik işlevler, sayfaların önbelleğe alınmasından otomatik olarak çıkarılmasını sağlar.

Sıkça Sorulan Sorular

“Next.js'te Önbellek Seçenekleriyle fetch()” dersi ücretsiz mi?

Evet — “Next.js'te Önbellek Seçenekleriyle fetch()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Next.js'te Önbellek Seçenekleriyle fetch()” dersinde ne öğreneceğim?

Önbelleğe alma davranışını denetlemek için fetch üzerinde force-cache, no-store ve revalidate seçeneklerini kullanın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Next.js'te Önbellek Seçenekleriyle fetch()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Next.js'te Önbellek Seçenekleriyle fetch()
unstable_cache ve React cache()
Artımlı Statik Yeniden Oluşturma (ISR)
Veri Değişiklikleri için Sunucu Eylemleri

← React Academy Sayfasına Dön