Next.js 16 Caching Katmanları: Data Cache, Request Memoization ve Router Cache Mimarisi

Modern web geliştirmede performans, istemciye gönderilen kodun küçüklüğü kadar sunucunun yanıt verme hızıyla (TTFB) da doğrudan ilişkilidir. Next.js App Router, veriyi sadece tek bir yerde saklamak yerine dört farklı yaşam döngüsüne sahip caching katmanında yönetir. Birçok geliştirici Next.js projelerinde "Verimi güncelledim ama ekranda hala eskisi görünüyor" veya "Sayfam her istekte veritabanına gidiyor, sunucu kaynaklarım tükendi" şikayetleriyle karşılaşır. Bunun kök nedeni, bu dört katmanın birbiriyle nasıl konuştuğunu bilmemekten kaynaklanır.

Next.js caching sistemini bir hiyerarşi olarak anlamak gerekir. Bir HTTP isteği tarayıcıdan çıktığı andan itibaren sırasıyla şu katmanlardan geçer:

React Server Components mimarisinde bileşen ağacının farklı derinliklerinde aynı kullanıcı bilgisine veya ürün detayına ihtiyaç duyabilirsiniz. Props drilling yapmadan aynı fetch fonksiyonunu çağırmak eskiden performans felaketiydi. React ve Next.js, aynı URL ve opsiyonlara sahip GET fetch çağrılarını tek bir render döngüsü boyunca otomatik olarak memoize eder. İlk çağrı gerçek HTTP isteğini atar, ağaçtaki diğer tüm çağrılar bellekteki referansı döndürür.

// components/Header.tsx ve components/Sidebar.tsx içinde ayrı ayrı çağrılsa bile
// ağ üzerinden sadece 1 adet istek gönderilir:
async function getCurrentUser() {
  const res = await fetch('https://api.monova.digital/user/me');
  return res.json();
}

export async function Header() {
  const user = await getCurrentUser();
  return <header>Hoş geldiniz, {user.name}</header>;
}

Data Cache, istekler arasında paylaşılan sunucu önbelleğidir. Next.js 16'da verilerinizi ne kadar süreyle taze tutacağınızı iki ana stratejiyle belirlersiniz: 1. **Zaman Temelli (Time-based):** Belirli saniyeler boyunca veri korunur (örneğin döviz kurları için 60 saniye). 2. **Talep Doğrultusunda (On-Demand):** Veri bir yönetim panelinden güncellendiğinde 'tag' bazlı anında geçersiz kılınır.

// Veriyi etiketle önbelleğe alma:
export async function getProduct(slug: string) {
  const res = await fetch(`https://api.monova.digital/products/${slug}`, {
    next: { tags: ['products', `product-${slug}`] }
  });
  return res.json();
}

// Bir Server Action içinde anında geçersiz kılma:
'use server';
import { revalidateTag } from 'next/cache';

export async function updateProductStock(slug: string) {
  // DB güncellemesi yapıldıktan sonra:
  revalidateTag(`product-${slug}`);
}

Yüzlerce kurumsal kod denetiminde tespit ettiğimiz ve performansı felç eden en yaygın hatalar: - **Hata 1: Dinamik Fonksiyonları Bilinçsizce Kullanmak:** Sayfanın en üstünde `cookies()` veya `headers()` çağırmak, tüm sayfayı otomatik olarak Full Route Cache dışına atar ve dinamik render moduna zorlar. - **Hata 2: İstemci router.refresh() ile Sunucu Önbelleğini Temizleyeceğini Sanmak:** `router.refresh()` sadece tarayıcının Router Cache'ini temizler; sunucudaki Data Cache geçersiz kılınmadıkça sunucu eski veriyi üretmeye devam eder. - **Hata 3: fetch yerine doğrudan ORM (Prisma/Drizzle) Çağrılarında Cache Unutulması:** Doğrudan veritabanı sorguları Next.js fetch sarmalayıcısından geçmediği için varsayılan olarak önbelleğe alınmaz. Bunun için `unstable_cache` veya React `cache()` kullanılmalıdır. - **Hata 4: Mutasyon Sonrası redirect() Sıralaması:** `revalidateTag()` çağrısını `redirect()` sonrasına koymak; `redirect()` dahili bir hata (NEXT_REDIRECT) fırlattığı için revalidation satırının hiçbir zaman çalışmamasına neden olur.

Next.js App Router'da caching bir engel değil, sitenizi 50ms altında açmanızı sağlayan en gelişmiş süper güçtür. Canlıya çıkmadan önce şu kontrol listesini mutlaka tamamlayın: ✓ Dinamik fonksiyonları (cookies, headers) sadece gereken en alt bileşenlere izole edin. ✓ Tüm harici API çağrılarına anlamlı cache tag'leri atayın. ✓ Server Action form submit sonrasında ilgili sayfaları revalidateTag ile yenileyin. ✓ Lighthouse Core Web Vitals testlerinde TTFB değerinin 200ms altında olduğunu doğrulayın.