Next.js 16'da Cache Components: use cache, PPR ve 2026 Mülakat Soruları

Next.js 16 Cache Components, App Router'ın tanıtılmasından bu yana önbellekleme konusundaki en büyük değişimi temsil etmektedir. Eski model varsayılan olarak her şeyi önbelleğe alıyor ve vazgeçmeyi gerektiriyordu. Yeni model varsayılan olarak hiçbir şeyi önbelleğe almaz ve "use cache" yönergesiyle açık bir şekilde katılım gerektirir.

Next.js 16 Neden Örtük Önbelleklemeyi Kaldırdı

Next.js 14-15'teki örtük önbellekleme modeli tahmin edilebilirlik sorunlarına yol açıyordu. Bir Server Component içindeki fetch çağrısı otomatik olarak tekilleştirilip önbelleğe alınıyordu, ancak bir sayfanın statik mi yoksa dinamik mi olduğu hangi API'lerin kullanıldığına bağlıydı. Önbellek davranışını hata ayıklamak birden fazla gizli katmanın anlaşılmasını gerektiriyordu: fetch önbelleği, tam rota önbelleği ve yönlendirici önbelleği.

Next.js 16 üç örtük önbelleğin tamamını kaldırmaktadır. "use cache" ile açıkça işaretlenmedikçe her sayfa istek zamanında dinamik olarak render edilir. revalidate dışa aktarımı kaldırılmıştır. unstable_cache derleyici farkında "use cache" yönergesiyle değiştirilmiştir. Bu değişikliklerin tam kapsamı Next.js 16 resmi blog yazısında detaylı olarak açıklanmaktadır.

Bu değişim otomatik optimizasyonu açık kontrol ile takas etmektedir. Örtük önbelleklemeye dayanan uygulamalarda performans başlangıçta düşebilir, ancak hata ayıklama deneyimi önemli ölçüde iyileşmektedir: önbelleğe alınan içerik, çerçeve sezgiselleri yüzünden değil, kod öyle söylediği için önbelleğe alınmıştır.

use cache Yönergesi Üç Kapsamda Nasıl Çalışır

"use cache" yönergesi üç düzeyde çalışır: dosya, bileşen ve fonksiyon. Doğru kapsamı seçmek Next.js 16'daki en önemli önbellekleme kararıdır.

Dosya düzeyinde önbellekleme bir dosyadaki her asenkron dışa aktarımı önbelleğe alınabilir olarak işaretler. Tamamen statik içerik ve kullanıcıya özgü veri içermeyen sayfalar için uygundur.

"use cache"

import { getPricingPlans } from "@/lib/data"

// Entire page is cached as a static shell
export default async function PricingPage() {
  const plans = await getPricingPlans()
  return (
    <section>
      {plans.map((plan) => (
        <PricingCard key={plan.id} plan={plan} />
      ))}
    </section>
  )
}

Bileşen düzeyinde önbellekleme bir sayfa içindeki bireysel bileşenleri önbelleğe alır. Bu, Partial Pre-Rendering'i mümkün kılar: önbelleğe alınan bileşen statik kabuğun parçası olarak render edilirken, dinamik kardeşler istek zamanında akış halinde gelir.

async function ProductRecommendations({ categoryId }: { categoryId: string }) {
  "use cache"
  // categoryId becomes part of the automatic cache key
  const products = await getTopProducts(categoryId)
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name} - {p.price}</li>
      ))}
    </ul>
  )
}

Fonksiyon düzeyinde önbellekleme doğrudan veri çekme fonksiyonlarını hedefler. Eski unstable_cache kalıbının yerini alır.

import { cacheLife } from "next/cache"

export async function getArticleBySlug(slug: string) {
  "use cache"
  cacheLife("hours")
  // slug is automatically included in the cache key
  const article = await db.article.findUnique({ where: { slug } })
  return article
}

Derleyici önbellek anahtarlarını fonksiyon argümanlarından otomatik olarak üretir. Manuel keyParts dizileri veya JSON.stringify geçici çözümleri gerekmez. Argümanların serileştirilebilir olması şarttır (string, sayı, düz nesne). Bir sınıf örneği veya fonksiyon argüman olarak geçirildiğinde serileştirme bozulur.

Partial Pre-Rendering: Dinamik Delikleri Olan Statik Kabuk

Partial Pre-Rendering (PPR) Next.js 14-15'te deneyseldi. Next.js 16'da PPR kararlı bir özellik haline gelmiştir ve next.config.ts dosyasındaki cacheComponents: true aracılığıyla doğrudan Cache Components ile entegre edilmiştir.

PPR tek bir rotanın aynı anda kısmen statik ve kısmen dinamik olmasına olanak tanır. Statik kabuk CDN'den anında sunulur. Dinamik içerik <Suspense> sınırları çözüldükçe akış halinde gelir.

import { Suspense } from "react"
import { UserGreeting } from "@/components/UserGreeting"
import { StaticSidebar } from "@/components/StaticSidebar"
import { RecentActivity } from "@/components/RecentActivity"

export default function DashboardPage() {
  return (
    <div className="grid grid-cols-12 gap-6">
      {/* Cached static shell - served instantly */}
      <StaticSidebar />

      <main className="col-span-9">
        {/* Dynamic - streams in after static shell */}
        <Suspense fallback={<GreetingSkeleton />}>
          <UserGreeting />
        </Suspense>

        {/* Dynamic - streams independently */}
        <Suspense fallback={<ActivitySkeleton />}>
          <RecentActivity />
        </Suspense>
      </main>
    </div>
  )
}

Render karar ağacı basittir: "use cache" içeren bileşenler statik kabuğun parçası olur. Çerezleri, başlıkları veya diğer isteğe özgü verileri okuyan, <Suspense> ile sarmalanmış bileşenler dinamik olarak akış halinde gelir. Geri kalan her şey istek zamanında render edilir.

Next.js 15'teki experimental.ppr bayrağı ve experimental_ppr rota segmenti yapılandırması kaldırılmıştır. PPR davranışı artık yalnızca cacheComponents: true aracılığıyla kontrol edilmektedir.

cacheLife Profilleri: revalidate'in Yerini Alan Sistem

Next.js 15'teki revalidate dışa aktarımı kaldırılmıştır. Yerine cacheLife() önbellek süresini kontrol eden adlandırılmış profiller sunmaktadır. Yerleşik profiller seconds, minutes, hours, days, weeks ve max'tır.

import { cacheLife } from "next/cache"

export async function getExchangeRates() {
  "use cache"
  cacheLife("minutes") // Revalidates every few minutes
  const rates = await fetch("https://api.exchangerate.host/latest")
  return rates.json()
}

export async function getCompanyInfo() {
  "use cache"
  cacheLife("weeks") // Rarely changes
  return db.company.findFirst()
}

Özel profiller next.config.ts dosyasında tanımlanır:

import type { NextConfig } from "next"

const config: NextConfig = {
  cacheComponents: true,
  cacheLife: {
    // Custom profile for product data
    product: {
      stale: 300,      // Serve stale for 5 minutes
      revalidate: 3600, // Revalidate in background every hour
      expire: 86400,    // Hard expire after 24 hours
    },
  },
}

export default config

Profillerin yapılandırmada merkezileştirilmesi, tek bir değişikliğin tüm uygulamadaki önbelleklemeyi ayarlaması anlamına gelir. Bu, Next.js 15 kod tabanlarında sorun yaratan dağınık revalidate: 3600 değerlerini ortadan kaldırır.

Hatırlanması gereken bir kural: cacheLife() her fonksiyon çağrısında yalnızca bir kez çalıştırılmalıdır. Koşullu önbellekleme yalnızca tek bir dal çalıştığında geçerlidir:

export async function getProduct(id: string) {
  "use cache"
  const product = await db.product.findUnique({ where: { id } })
  if (!product) {
    // Short cache for missing items (may appear soon)
    cacheLife("minutes")
    return null
  }
  // Longer cache for existing products
  cacheLife("product")
  return product
}

Hedefli Geçersiz Kılma için cacheTag

cacheTag() olmadan önbelleğe alınmış bir fonksiyon yalnızca zamanla sona erebilir. İsteğe bağlı geçersiz kılma, önbellek girişlerinin etiketlenmesini ve bir Server Action içinde revalidateTag() çağrılmasını gerektirir.

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

export async function getProductById(id: string) {
  "use cache"
  cacheTag(`product-${id}`, "products")
  cacheLife("days")
  return db.product.findUnique({ where: { id } })
}

"use server"

import { revalidateTag } from "next/cache"

export async function updateProduct(id: string, data: ProductUpdate) {
  await db.product.update({ where: { id }, data })
  // Invalidate this specific product AND the product list
  revalidateTag(`product-${id}`)
  revalidateTag("products")
}

Etiketler her biri en fazla 256 karakter destekler ve önbellek girişi başına en fazla 128 etiket kullanılabilir. Pratik bir kural: bireysel kayıtlar için varlık düzeyinde etiketler (product-123) ve liste sayfaları için koleksiyon düzeyinde etiketler (products) kullanılmalıdır.

Güvenlik: use cache ile use cache private Karşılaştırması

Varsayılan "use cache" yönergesi paylaşımlı bir önbellek oluşturur. Herhangi bir argüman kombinasyonu, herhangi bir kullanıcıya sunulabilecek bir önbellek girişi üretir. Bu, genel veriler için doğrudur ancak kişiselleştirilmiş içerik için tehlikelidir.

"use cache: private" kullanıcı başına bir önbellek oluşturur ve önbellek anahtarına mevcut oturumu dahil eder. Önbelleğe alınan kapsam içinde cookies() ve headers()'a güvenle erişebilir.

// WRONG: User data in shared cache - data leak risk
export async function getUserDashboard(userId: string) {
  "use cache"
  return db.user.findUnique({
    where: { id: userId },
    include: { orders: true, preferences: true },
  })
}

// CORRECT: Private cache scoped to the current user
export async function getUserDashboard() {
  "use cache: private"
  cacheLife("minutes")
  const session = await cookies()
  const userId = session.get("userId")?.value
  return db.user.findUnique({
    where: { id: userId },
    include: { orders: true, preferences: true },
  })
}

Üçüncü varyant "use cache: remote" önbelleği harici depolamada kalıcı hale getirir. Sunucusuz ortamlarda (Vercel, AWS Lambda) varsayılan bellek içi önbellek soğuk başlatmalarda kaybolur. "use cache: remote" önbellek girişlerinin fonksiyon örnekleri arasında hayatta kalmasını sağlar.

Mülakatlar için karar matrisi:

| Yönerge | Kapsam | Ne Zaman Kullanılmalı | |---------|--------|----------------------| | "use cache" | Paylaşımlı, tüm kullanıcılar | Genel veriler: fiyatlandırma, makaleler, ürün katalogları | | "use cache: private" | Kullanıcı başına oturum | Kişiselleştirilmiş veriler: panolar, ayarlar, sipariş geçmişi | | "use cache: remote" | Paylaşımlı, harici depolama | Sunucusuz ortamlarda yüksek trafikli veriler |

Next.js 15'ten Cache Components'a Geçiş

unstable_cache'den "use cache"'e geçiş büyük ölçüde mekaniktir ancak mülakatlarda sıkça karşılaşılan üç tuzak içerir.

Tuzak 1: İstek kapsamlı veriler üzerinden kapanışlar. Önbelleğe alınan fonksiyon çevreleyen kapsamdan istek başına değişen bir değere referans veriyorsa (başlık, çerez, kullanıcı kimliği), dönüşüm doğrudan yapılamaz. Bu değer açık bir argüman olarak geçirilmeli veya "use cache: private" kullanılmalıdır.

Tuzak 2: Koşullu önbellekleme. unstable_cache'i yalnızca bir koşul sağlandığında saran kodun yeniden yapılandırılması gerekir. "use cache" uygulandığında her zaman aktiftir. Koşul önbelleğe alınan fonksiyonun dışına taşınmalıdır.

Tuzak 3: Manuel önbellek anahtarları. unstable_cache açık keyParts dizileri gerektiriyordu. "use cache" derleyicisi anahtarları argümanlardan, derleme kimliğinden ve fonksiyon hash'inden otomatik olarak üretir. Manuel anahtar yönetiminin kaldırılması hedeflenmelidir, ancak tüm önbellek farklılaştırma değerlerinin gerçek fonksiyon parametreleri olduğu doğrulanmalıdır.

Resmi Sürüm 16 yükseltme kılavuzu tam geçiş yolunu detaylı olarak kapsamaktadır.

Mülakat Soruları: Kıdemli Geliştiricilere Neler Soruluyor

Bu sorular 2026'daki kıdemli Next.js pozisyonları için gerçek mülakat kalıplarını yansıtmaktadır. Her biri Cache Components'ın belirli bir yönünü hedeflemektedir.

S1: Next.js 16'daki örtük önbelleklemeden açık önbelleklemeye geçişi açıklayın. Çerçeve neden bu değişikliği yaptı?

Next.js 14-15 fetch çağrılarını ve sayfaları örtük olarak önbelleğe alıyordu. Bir sayfanın statik mi yoksa dinamik mi olduğunu hata ayıklamak birden fazla gizli önbellek katmanının takip edilmesini gerektiriyordu. "use cache" ile açık model, önbelleklemeyi kaynak kodda görünür kılar. Takas: örtük önbelleklemeden geçiş yapan uygulamalarda performans başlangıçta düşebilir, ancak geliştiriciler tam kontrol ve tahmin edilebilirlik kazanır.

S2: "use cache"'in üç kapsamı nedir ve her biri ne zaman kullanılmalıdır?

Tamamen statik sayfalar için dosya düzeyi. Bir sayfa içinde önbelleğe alınmış ve dinamik içeriği karıştırmak için bileşen düzeyi (PPR kalıbı). Belirli veri çekme işlemlerini önbelleğe almak için fonksiyon düzeyi. Kapsam seçimi önbellek ayrıntı düzeyini ve geçersiz kılma sınırlarını belirler.

S3: Bir ekip kullanıcı sipariş geçmişini döndüren bir fonksiyonu "use cache" ile önbelleğe alır. Ne olur?

Paylaşımlı önbellek sonucu fonksiyon argümanlarına göre anahtarlanmış olarak depolar. Fonksiyon bir userId parametresi kabul ediyorsa, farklı kullanıcılar farklı önbellek girişleri alır, ancak önbellek altyapısı hala paylaşımlıdır. Fonksiyon userId'yi parametreler yerine cookies()'dan okursa, derleme başarısız olur çünkü cookies() paylaşımlı önbellek kapsamında yasaklanmış bir çalışma zamanı API'sidir. Çözüm: "use cache: private"'a geçmek veya kullanıcı kimliğini açık bir argüman olarak geçirmek.

S4: cacheLife eski revalidate dışa aktarımından nasıl farklıdır?

revalidate sayfa veya layout düzeyinde ayarlanan tek bir sayıydı (saniye). cacheLife üç boyutlu adlandırılmış profiller kullanır: stale (eski içeriği sun), revalidate (arka planda yenileme aralığı) ve expire (kesin sona erme). Profiller next.config.ts'de merkezileştirilmiştir, böylece tek bir değişiklik o profili kullanan tüm çağrı noktalarını etkiler.

S5: PPR'ın statik bir kenar çubuğu ve dinamik kullanıcı içeriğine sahip bir pano sayfasını nasıl render ettiğini açıklayın.

Derleme zamanında Next.js, kenar çubuğunu ("use cache" ile işaretlenmiş) ve dinamik bölümler için <Suspense> yedeklerini içeren bir statik kabuk oluşturur. İstek anında CDN statik kabuğu anında sunar. Sunucu daha sonra dinamik içeriği (kullanıcı selamlama, etkinlik akışı) Suspense sınırlarına akış halinde gönderir. Kullanıcı düzeni anında görür ve dinamik içerik kademeli olarak dolar.

S6: cacheTag() içermeyen önbelleğe alınmış bir fonksiyona ne olur?

Yalnızca cacheLife profili aracılığıyla zamanla sona erebilir. revalidateTag() ile isteğe bağlı geçersiz kılma imkansızdır. Bu, içerik editörleri bir kaydı güncelleyip sitede anında yansıma beklediklerinde ortaya çıkan yaygın bir gözden kaçırmadır. İsteğe bağlı geçersiz kılmaya ihtiyaç duyabilecek her önbelleğe alınmış fonksiyon en az bir cacheTag() içermelidir.

Daha fazla Next.js veri çekme mülakat sorusu SharpSkill'de zamanlı oturumlar ve ayrıntılı açıklamalarla pratik modülleri olarak mevcuttur. Next.js Server Actions modülü revalidateTag ile eşleşen Server Action kalıplarını kapsamaktadır.

Üretim Cache Components için Pratik Kontrol Listesi

• next.config.ts'de cacheComponents: true'yu etkinleştirme ve experimental.ppr ile experimental.dynamicIO bayraklarını kaldırma
• Her sayfayı denetleme: genel içerik sunan statik sayfalara ve veri çekme fonksiyonlarına "use cache" ekleme
• Tüm dinamik içeriği (kullanıcıya özgü, istek zamanı) anlamlı iskelet yedeklerle <Suspense> sınırlarına sarma
• Çerezlere, başlıklara erişen veya kişiselleştirilmiş veri döndüren her fonksiyon için "use cache: private" kullanma
• Yaygın veri kategorileri için özel cacheLife profilleri tanımlama (ürün verisi, kullanıcı oturumları, statik içerik)
• İsteğe bağlı geçersiz kılma gerektirebilecek her önbelleğe alınmış fonksiyona cacheTag() ekleme
• next dev'deki önbellekleme davranışı önemli ölçüde farklı olduğundan next build && next start ile üretim modunda test etme
• Sonraki sayfaya dağıtmadan önce sayfa başına önbellek isabet oranlarını 24 saat izleme

Sonuç

• Next.js 16, örtük önbelleklemeyi dosya, bileşen ve fonksiyon kapsamında açık "use cache" ile değiştirmektedir
• PPR artık cacheComponents: true altında kararlı ve varsayılandır, statik kabukları akış halinde dinamik içerikle sunmaktadır
• cacheLife profilleri revalidate'in yerini merkezileştirilmiş, üç boyutlu önbellek süresi kontrolüyle almaktadır
• cacheTag + revalidateTag isteğe bağlı geçersiz kılmayı etkinleştirir; eksik etiketler yalnızca zamana dayalı sona erme anlamına gelir
• "use cache: private" kullanıcılar arası veri sızıntılarını önlemek için kullanıcıya özgü veriler için zorunludur
• 2026'daki mülakat soruları örtükten açığa geçiş, PPR render akışı, önbellek güvenliği ve Next.js 15'ten geçiş tuzaklarına odaklanmaktadır