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. Ağustos 2026'da yayınlanan Next.js 16.3 ile Cache Components, Instant Navigations özelliği kazandı: sunucu odaklı uygulamalara SPA benzeri yanıt verme hızı getiren bir araç seti.

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.

Next.js 16.3'te Instant Navigations

Next.js 16.3, Server Components'ın en yaygın eleştirisini ele almaktadır: navigasyonlar ağ gecikmesi gerektirdiği için yavaş hissettirmektedir. Instant Navigations, bağlantı başına değil rota başına yeniden kullanılabilir kabukları önceden getirerek bu sorunu çözmektedir.

next.config.ts dosyasında iki bayrakla Instant Navigations'ı etkinleştirin:

import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
}

export default nextConfig

partialPrefetching: true ile Next.js her rotadan bir yükleme kabuğu çıkarır ve istemci tarafında önbelleğe alır. Kullanıcı bir bağlantıya tıkladığında, kabuk anında render edilirken dinamik içerik akış halinde gelir. Bu, tek sayfalık uygulamaların kullandığı aynı yanıt verme kalıbıdır, ancak sunucu odaklı renderingden vazgeçilmeden.

Next.js DevTools'taki Navigation Inspector, navigasyonları kabuk düzeyinde duraklatarak tam olarak neyin önceden getirildiğini görmenizi sağlar. Instant Insights, geliştirme sırasında yavaş navigasyonları otomatik olarak tespit eder ve bunları çözülmesi gereken hatalara dönüştürür.

Partial Prefetching ile Partial Pre-Rendering

Partial Pre-Rendering (PPR) Next.js 14-15'te deneyseldi. Next.js 16'da PPR kararlı bir özellik haline gelmiştir ve cacheComponents: true aracılığıyla doğrudan Cache Components ile entegre edilmiştir. Next.js 16.3, kabukların istemciye nasıl teslim edildiğini değiştiren Partial Prefetching ile bunu genişletmektedir.

16.3'ten önce Next.js, görünüm alanındaki her bağlantı için bir prefetch isteği gönderiyordu. Partial Prefetching ile rota başına bir kabuk önceden getirilir. /chat/[id]'ye işaret eden yirmi bağlantı, yirmi değil bir prefetch tetikler. Bu, ağ yükünü azaltır ve prefetch stratejisini SPA'ların rota başına kod bölme yöntemine benzetir.

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 - prefetched and served instantly */}
      <StaticSidebar />

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

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

Render karar ağacı: "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. Kabuğun ötesinde bağlantı başına prefetching için belirli bağlantılara <Link prefetch={true}> eklenmelidir.

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.

Hedefli Geçersiz Kılma için cacheTag ve updateTag

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() veya yeni updateTag() ç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 { updateTag } 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
  updateTag(`product-${id}`)
  updateTag("products")
}

revalidateTag ile updateTag arasındaki fark: her ikisi de geçersiz kılma yapar, ancak updateTag Next.js 16.3'te yeni önbellekleme modeliyle sorunsuz çalışmak üzere tasarlanmış önerilen ilkeldir. Etiketler her biri en fazla 256 karakter destekler ve önbellek girişi başına en fazla 128 etiket kullanılabilir.

Güvenlik: use cache Varyantları

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.

"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. Remote caching, önbellek girişlerinin fonksiyon örnekleri arasında hayatta kalmasını sağlar, ancak bir ağ gecikmesi gerektirir ve genellikle platform ücretleri içerir.

// 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 },
  })
}

Mülakatlar için karar matrisi:

Next.js 16.3'te Root Params

Next.js 16.3, kök düzeni üzerinde tanımlanan dinamik segmentler için aşırı prop geçişini çözen root params'ı tanıtmaktadır. [lang] gibi root params, etkili bir şekilde global olmakta ve bileşen ağacı boyunca gerekli olmaktadır.

import { lang } from "next/root-params"

export default async function PostPage(
  props: PageProps<"/[lang]/posts/[slug]">
) {
  const { slug } = await props.params
  const language = await lang()

  return (
    <article>
      <p>Language: {language}</p>
      <p>Post: {slug}</p>
    </article>
  )
}

Root params, use cache kapsamları içinde çalışır ve yalnızca gerçekten okunan parametreler önbellek anahtarının parçası olur. Bu, önbellek davranışını bozmadan uluslararasılaştırma kalıplarını daha ergonomik hale getirir.

Instant Navigations'ı Test Etme

Playwright için instant() test yardımcısı, ağ beklemeden bir navigasyondan hemen sonra hangi içeriğin görünür olduğunu doğrulamanızı sağlar. Bu, bir yeniden düzenlemenin yanlışlıkla bir navigasyonu yavaşlattığı regresyonları yakalar.

import { expect, test } from "@playwright/test"
import { instant } from "@next/playwright"

test("product title is available immediately", async ({ page }) => {
  await page.goto("/products/shoes")

  // Assert what's visible without waiting for network
  await instant(page, async () => {
    await page.click('a[href="/products/hats"]')
    await expect(page.locator("h1")).toContainText("Baseball Cap")
    await expect(page.getByText("Checking inventory...")).toBeVisible()
  })

  await expect(page.getByText("12 in stock")).toBeVisible()
})

Bu kalıp, anında yüklenmesi amaçlanan sayfaların kod değişiklikleri boyunca anında kalmasını sağlar. DevTools'taki Navigation Inspector, geliştirme sırasında kabukları görsel olarak incelemenizi sağlayarak bunu tamamlar.

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 ve 16.3 güncellemelerinin 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: 16.3'teki Partial Prefetching, 16.0'daki prefetching'den nasıl farklıdır?

16.0'da Next.js, görünüm alanındaki her bağlantı için bir prefetch isteği gönderiyordu. partialPrefetching: true ile 16.3'te, rota başına oturum boyunca istemci tarafında önbelleğe alınan yeniden kullanılabilir bir kabuk önceden getirilir. /chat/[id]'ye yirmi bağlantı, yirmi ayrı istek değil, chat rotası kabuğu için bir prefetch tetikler. Bu, ağ yükünü azaltır ve SPA'ların kod bölme yöntemiyle uyumludur.

S4: 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.

S5: 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.

S6: revalidateTag ile updateTag arasındaki fark nedir?

Her ikisi de etikete göre önbellek girişlerini geçersiz kılar. updateTag, Next.js 16.3'te açık önbellekleme modeliyle temiz bir şekilde entegre olmak üzere tasarlanmış önerilen ilkeldir. Pratikte her ikisi de isteğe bağlı geçersiz kılma için çalışır, ancak updateTag geleceğe yönelik API'dir.

S7: export const instant = false ne zaman kullanılmalıdır?

Bir rota kasıtlı olarak sunucu yanıt verene kadar navigasyonu engellemelidir. Örneğin, bir blog yazıları için asla yükleme kabuğu göstermeyebilir, okuyucuların tam içeriği hemen görmesini isteyebilir. Bu, o rota için Instant Insights hatalarını devre dışı bırakır.

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ü önbellek geçersiz kılma 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 ve partialPrefetching: true'yu etkinleştirme
• 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
• Sunucusuz ortamlarda yüksek trafikli veriler için "use cache: remote" değerlendirme
• 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
• Server Actions'ta isteğe bağlı geçersiz kılma için updateTag() kullanma
• next dev'deki önbellekleme davranışı önemli ölçüde farklı olduğundan next build && next start ile üretim modunda test etme
• Navigasyon regresyonlarını yakalamak için instant() ile Playwright testleri yazma
• Önceden getirilen kabukları görselleştirmek için DevTools'ta Navigation Inspector kullanma

Kaynaklar

• Next.js 16.3 sürüm blogu - Instant Navigations, Partial Prefetching, root params, bellek iyileştirmeleri
• Instant Navigations detaylı inceleme - Stream/Cache/Block modeli, Navigation Inspector, instant() test yardımcısı
• use cache yönergesi dokümantasyonu - Üç varyant, cacheLife, cacheTag, updateTag
• Next.js 16 sürüm blogu - Orijinal açık önbellekleme değişikliği

Next.js 16 Cache Components Hakkında Hatırlanması Gerekenler

• Next.js 16, örtük önbelleklemeyi dosya, bileşen ve fonksiyon kapsamında açık "use cache" ile değiştirmektedir
• Next.js 16.3, Instant Navigations ekler: partialPrefetching: true ile uygulamalar SPA'lar kadar duyarlı hissettirmektedir
• PPR, cacheComponents: true altında kararlıdır ve 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 + updateTag 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
• "use cache: remote" sunucusuz ortamların soğuk başlatmalar arasında önbellek korumasına yardımcı olur
• next/root-params'tan root params, [lang] gibi global dinamik segmentler için prop geçişini çözer
• 2026'daki mülakat soruları örtükten açığa geçiş, 16.3 Instant Navigations, Partial Prefetching ve önbellek güvenliğine odaklanmaktadır