Cache ve render modeli

Varsayılan: Her Şey Dinamik

Next.js'in cache modeli son üç sürümde değişti. Next.js 14'te fetch varsayılan olarak cache'liydi; 15'te bu varsayılan kaldırıldı.¹ 16 ile gelen Cache Components ise kuralı tersine çevirdi: veri her istekte taze okunur, neyi cache'leyeceğinizi siz "use cache" ile söylersiniz.² 16.4'ten beri yeni projelerde bu model açık gelir.³

Statik Kabuk

Build sırasında Next.js her sayfayı render etmeyi dener. Tamamlanabilen her şey statik kabuğa (static shell) girer ve CDN'den anında sunulur. Tamamlanamayan kısımlar için <Suspense> fallback'i kabuğa konur, içerik istek anında akar. Bu modelin adı Partial Prerendering (PPR).²

next build çıktısında böyle sayfalar ◐ (Partial Prerender) işaretiyle görünür. Bu rehberin proje uygulamasında ürün sayfası, cache'li ürün bilgisi ve akan stok bilgisiyle böyle işaretlendi.

Next.js ekibinin önerdiği kalıp, async işi ağaçta olabildiğince aşağı itmektir. Ne kadar derindeyse kabuk o kadar dolu olur.²

use cache

"use cache", async bir fonksiyonun ya da component'in sonucunu cache'ler. Argümanlar otomatik olarak cache anahtarına girer; getProduct("a") ile getProduct("b") ayrı kayıtlardır.⁵

// lib/products.ts
import { cacheLife, cacheTag } from "next/cache";

export async function getProduct(slug: string) {
  "use cache";
  cacheLife("hours");
  cacheTag("products", `product-${slug}`);

  return db.product.findUnique({ where: { slug } });
}

Doküman her "use cache"'in yanına bir cacheLife yazmayı önerir; yazmazsanız default profili uygulanır.² Sık kullanılan profiller:⁶

seconds gibi çok kısa ömürlü cache'ler kabuğa alınmaz, dinamik bir delik olarak kalır.⁶

"use cache"'i bir component'e de yazabilirsiniz. Cache'li component'e children olarak verdiğiniz dinamik içerik cache kaydına girmez, olduğu gibi geçer.⁵

Kullanıcıya Özel Veri

cookies(), headers() ve searchParams istek anında bilinir. Bunları okuyan component <Suspense> içinde olmalıdır.²

import { cookies } from "next/headers";
import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <h1>Mağaza</h1>
      <Suspense fallback={<span>Sepet</span>}>
        <CartCount />
      </Suspense>
    </>
  );
}

async function CartCount() {
  const cart = (await cookies()).get("cart")?.value;
  return <span>Sepet ({cart ? Object.keys(JSON.parse(cart)).length : 0})</span>;
}

"use cache" içinde cookies() çağıramazsınız. Değeri dışarıda okuyup argüman olarak verin; argüman cache anahtarına girer.⁵

async function Recommendations() {
  const segment = (await cookies()).get("segment")?.value ?? "default";
  return <ProductRow products={await getRecommendations(segment)} />;
}

async function getRecommendations(segment: string) {
  "use cache";
  cacheLife("hours");
  return db.product.findMany({ where: { segment } });
}

Math.random(), Date.now() ve crypto.randomUUID() de her çalışmada farklı değer üretir. Her istekte yeni değer istiyorsanız önce await connection() çağırın ve <Suspense> ile sarın; herkese aynı değer yetiyorsa "use cache" ile cache'leyin.²

Cache'i Güncellemek

İki yol var: süreyle (cacheLife) ya da bir olaydan sonra elle.⁷

Doküman etiket tabanlı yenilemeyi tercih etmeyi önerir; daha nokta atışıdır.⁷ CMS gibi seyrek değişen içerik için uzun bir cacheLife("max") ve bir etiket verip, içerik değişince CMS'in webhook'uyla revalidateTag çağırmak gereksiz yenilemeyi önler.⁷ Webhook'u Route Handler ve proxy dersinde yazacaksınız.

Cache Nerede Durur

Sunucular arası paylaşılan, kalıcı bir cache gerekiyorsa "use cache: remote" var. Her istek bir ağ gidiş-dönüşü demek, bu yüzden yalnızca isabet oranı yüksekse kazandırır.² Hiçbir cache yeni bir deploy'a taşınmaz; anahtar build kimliğini içerir.⁵

Kendin Dene

• getProduct'tan "use cache"'i silin ve next dev'deki uyarıyı okuyun. Önerilen iki çözümü tek tek deneyin.

• next build çıktısında sayfaların yanındaki ○, ◐ ve ƒ işaretlerini karşılaştırın.

• "use cache" içinde cookies() çağırın. Hata mesajı ne diyor?

• cacheLife("seconds") verin ve build çıktısındaki değişikliğe bakın.

Detaylı Öğrenmek İçin

• Yazı: Aurora Scharff, "Cache Components in Next.js"; tek bir mağaza sayfası üzerinden ilk cache'ten etiketle yenilemeye kadar modeli adım adım anlatır.⁸

• Video: Aurora Scharff'ın Next.js Conf 2025 konuşması "Composition, Caching, and Architecture in Modern Next.js".⁹

• Video: Next.js ekibinin "Why Partial Prerendering and how it works" anlatımı (10 dk).¹⁰

• Resmi doküman: "Migrating to Cache Components" rehberi; dynamic, revalidate, unstable_cache gibi eski ayarların karşılıkları.⁴