- Konu sahibi
- #1
Next.js önbelleği neden eski veri gösterebilir?
Next.js eski veri gösteriyorsa çoğunlukla istek sonucu bir önbellekte tutuluyor, sayfa yeniden oluşturulmuyor veya tarayıcıdaki Router Cache eski RSC çıktısını kullanıyordur. Sorunu çözmek için önce verinin hangi katmanda önbelleklendiğini belirleyin; ardından ilgili isteği yeniden doğrulayın, önbelleği geçersiz kılın veya sayfayı dinamik çalışacak şekilde yapılandırın.
Bu örnek, Cache Components etkin olmayan App Router modelini kullanır. Önce kurulu Next.js sürümünü ve next.config içindeki cacheComponents seçimini kontrol edin. Cache Components etkinse use cache/cacheLife ve etiketli önbellek modelinin belgelerini izleyin; eski rota seçeneklerini aynı biçimde uygulamayın. Varsayılan fetch politikasını tüm sürümlerde aynı saymayın.
Önbellek nasıl çalışır?
Bir App Router uygulamasında aynı verinin birden fazla katmanda tutulabilmesi teşhisi zorlaştırır:
- Data Cache: Sunucuda yapılan veri isteğinin sonucu tutulabilir. Özellikle
fetchisteğine yeniden doğrulama süresi verilmişse sonuç bu süre dolana kadar kullanılabilir. - Full Route Cache: Sunucunun ürettiği statik HTML ve React Server Component çıktısı saklanabilir. Veri güncellense bile rota yeniden oluşturulmadıysa kullanıcı eski çıktıyı görebilir.
- Router Cache: Tarayıcı, ziyaret edilen rotanın RSC çıktısını geçici olarak tutabilir. Sunucudaki önbellek temizlense bile açık sekmedeki kullanıcı eski istemci çıktısını görebilir.
- Tarayıcı veya CDN önbelleği: HTTP yanıt başlıkları ya da aradaki CDN, sunucu yanıtını ayrıca saklayabilir.
Önbellek katmanları birbirinden bağımsız değildir. Data Cache yeniden doğrulandığında ilgili Full Route Cache de geçersizleşebilir; bu bağımlılığı göz ardı ederek rota önbelleğini tamamen bağımsız saymayın. Tersine, sunucu güncel içeriği üretmiş olsa da açık sayfanın Router Cache'i eski çıktıyı gösterebilir.
Somut örnek: ürün adı güncelleniyor ama liste eski kalıyor
Aşağıdaki sunucu bileşeninde örnek API adresini çalışan kendi servisinize değiştirin; yanıt id ve name alanları olan bir JSON dizi olmalıdır:
Kod:
// app/products/page.js
export default async function ProductsPage() {
const response = await fetch('https://api.example.com/products', {
next: { revalidate: 60 }
});
if (!response.ok) {
throw new Error('Ürünler alınamadı');
}
const products = await response.json();
return (
<main>
{products.map((product) => (
<p key={product.id}>{product.name}</p>
))}
</main>
);
}60 saniye dolunca arka planda kendiliğinden çalışan kesin zamanlayıcı yoktur. Süre sonrası ilk istek eski veriyi alırken arka plan yeniden doğrulaması başlayabilir; yenileme başarısızsa önceki veri korunabilir. Bir yönetim ekranında ürün adı değiştirildiğinde kullanıcı liste sayfasını hemen yenilese bile beklenen yeni ad görünmeyebilir. Ayrıca kullanıcı sayfayı istemci tarafı gezinmeyle açtıysa Router Cache de eski çıktıyı koruyabilir.
Doğru çözümü seçme
Önce verinin ne zaman güncellenmesi gerektiğini belirleyin. Karar, önbelleği tamamen kapatmak yerine gereksinime göre en dar katmanı değiştirmelidir.
| Gereksinim | Uygun yaklaşım | Sonuç |
|---|---|---|
| İçerik belirli aralıklarla güncellenebilir | İsteğe next.revalidate verin | Performans korunur, veri aralıklarla yenilenir |
| Değişiklikten hemen sonra yeni veri gerekli | Değişiklik işleminden sonra ilgili yolu veya etiketi geçersiz kılın | Sonraki istek güncel veriyi üretebilir |
| Her istekte anlık veri gerekli | İsteği önbelleksiz/dinamik çalışacak şekilde yapılandırın | Güncellik artar, sunucu yükü de artabilir |
| Yalnız açık sekme eski veriyi gösteriyor | router.refresh() veya tam yenilemeyle istemci etkisini ayırın | Sunucu önbelleği eskiyse yine eski veri gelebilir |
Yazma işlemi başarıyla tamamlandıktan sonra revalidatePath ilgili yolu hedefler. Etiketli ortak veride güncel revalidateTag(tag, "max") eskiyi sunup arka planda yenileme uygular; anında kendi yazdığını okuma gerekiyorsa Server Action içindeki updateTag ayrı bir seçenektir. Birden fazla sayfa aynı veriyi kullanıyorsa yol yerine ortak bir cache etiketi tanımlayıp bu etiketi geçersiz kılmak daha uygundur. Böylece yalnız ilgili kayıtlar değil, aynı veriye bağlı görünümler de sonraki istekte yeniden oluşturulabilir.
Örnek bir karar akışı şöyledir:
- Verinin gerçekten API'de güncellenip güncellenmediğini sunucu yanıtını doğrudan kontrol ederek doğrulayın. API eski veri döndürüyorsa Next.js önbelleğini temizlemek çözüm değildir.
- İsteğin
fetchseçeneklerindenext.revalidate,cacheveya benzeri bir önbellek politikasını kontrol edin. - Veri güncellemesinden sonra ilgili yolu yeniden doğrulayın. Gerekirse ortak cache etiketini geçersiz kılın.
- Sorun yalnız istemci tarafı gezinmede görünüyorsa sayfayı tam yenileyerek Router Cache etkisini ayırın.
- Veri her istekte güncel olmalıysa ilgili sunucu isteğini dinamik veya önbelleksiz hale getirin; bunun performans ve dış API yükü karşılığını değerlendirin.
- CDN ve tarayıcı yanıt başlıklarını inceleyin. Sunucu güncel yanıt ürettiği halde ağ katmanı eski yanıt döndürüyorsa düzeltme Next.js kodunda değil, HTTP önbellek politikasındadır.
Sık yapılan hatalar
Yalnız tarayıcıyı yenilemek: Bu işlem sunucudaki Data Cache veya Full Route Cache'i mutlaka temizlemez. Önce sunucu önbelleğinin kaynağını düzeltin.
Her şeyi önbelleksiz yapmak: Bu yöntem eski veriyi gizleyebilir ancak gereksiz sunucu çalışmasına, yavaşlamaya ve harici API'ye fazla isteğe yol açabilir. Yalnız gerçekten anlık olması gereken veriyi dinamikleştirin.
Statik ve dinamik veriyi ayırmamak: Sayfanın küçük bir bölümü anlık veri gerektirirken tüm rotayı dinamikleştirmek yerine veri isteğinin politikasını ve gerektiğinde bileşen sınırlarını ayrı değerlendirin.
Geliştirme ve üretimi karıştırmak: Geliştirme sunucusundaki davranış üretimdeki önbellekleme davranışını birebir temsil etmeyebilir. Teşhisi üretim derlemesi, gerçek yanıt başlıkları ve API yanıtı üzerinden yapın.
Sık sorulan sorular
Önbelleği temizlemek veri kaynağını da günceller mi?
Hayır. Önbellek yalnızca saklanan sonucu kaldırır veya yeniden üretilmesini sağlar. API, veritabanı ya da CMS hâlâ eski kaydı döndürüyorsa yeni sonuç da eski olacaktır.
Neden başka kullanıcı güncel veriyi görürken ben eski veriyi görüyorum?
Açık sekmenizdeki Router Cache, farklı CDN düğümü, farklı oturum verisi veya yeniden doğrulama zamanlaması etkili olabilir. Aynı rotayı tam yenilemeyle ve ağ yanıtını inceleyerek karşılaştırın.
Önbelleği tamamen kapatmak kalıcı çözüm müdür?
Yalnızca her istekte güncellik zorunluysa uygundur. Aksi durumda yeniden doğrulama veya hedefli geçersiz kılma, güncellik ile performans arasında daha dengeli bir çözümdür.
