Next.js App Router'da caching nasıl çalışır? Next.js 15 ve 16 ile neler değişti?

Next.js'te birden fazla cache katmanı vardır ve en büyük değişim şudur: Next.js 15 ile varsayılan davranış "her şeyi cache'le"den "açıkça istenmedikçe cache'leme"ye döndü; Next.js 16 ile de `"use cache"` direktifine dayalı Cache Components modeli geldi.

Katmanlar

Next.js 15 değişiklikleri

• fetch istekleri artık varsayılan olarak cache'lenmez; fetch(url, { cache: "force-cache" }) veya next: { revalidate: 60 } ile açıkça istenir.
• GET Route Handler'lar varsayılan olarak cache'lenmez.
• Client router cache'te sayfa segmentleri varsayılan olarak yeniden kullanılmaz (staleTime 0).

Next.js 16: Cache Components

next.config içinde cacheComponents: true ile açılır. Bir fonksiyon, bileşen veya sayfa "use cache" ile cache'lenir; süre cacheLife, etiket cacheTag ile verilir. Cache'lenmeyen dinamik kısımlar <Suspense> içinde stream edilir (Partial Prerendering).

import { cacheLife, cacheTag } from "next/cache";

async function getProducts() {
  "use cache";
  cacheLife("hours");
  cacheTag("products");
  return db.product.findMany();
}

Invalidation

"use server";
import { revalidateTag, revalidatePath } from "next/cache";

export async function updateProduct(data: FormData) {
  await db.product.update(/* ... */);
  revalidateTag("products", "max"); // Next 16'da ikinci argüman (cacheLife profili) istenir
  revalidatePath("/products");
}

Next 16 ayrıca Server Action içinde anında güncel veri görmek (read-your-writes) için updateTag ve cache'lenmemiş veriyi yenilemek için refresh API'lerini ekledi.

Pratik kural: kullanıcıya özel veriyi (cookie, header okuyan) asla paylaşılan cache'e koymayın.