Next.js 16.4, Cache Components'ı Next.js 17 öncesinde önerilen varsayılan yapıyor

Neler geldi

Next.js 16.4, Next.js ekibinin Cache Components'ı evrensel benimsemeye hazır ilan etmesiyle geliyor. Sürüm duyurusuna göre, 16.x sürümleri boyunca olgunlaştırılan programlama modeli, App Router'ın uzun süredir devam eden sorunlarını ele alıyor: kişiselleştirilmiş sayfalarda yavaş ilk yüklemeler, sunucuda render edilen uygulamalarda geride kalan istemci gezinmeleri ve örtük olarak kalan, akıl yürütülmesi zor caching. Cache Components, Next.js 17'de varsayılan model olacak ve 16.4 itibarıyla create-next-app ile oluşturulan her yeni proje bu özellik etkin olarak geliyor.

Önceki 16.x sürümleri, yeni modelin belirli durumlarda önceki yaklaşımın maliyet ve performans garantilerini her zaman yakalayamaması nedeniyle genel bir öneriden kaçınmıştı. 16.4 sürümü bu boşlukları iki önemli eklemyle kapatıyor: statik garantiler ve daha ince taneli prefetch kontrolü.

Cache Components nasıl çalışıyor

Temel fikir, Next.js ekibinin Cache-Control HTTP başlığının bileşen düzeyindeki benzeri olarak tanımladığı 'use cache' direktifi. Bir bileşeni bununla işaretlemek, render edilen arayüzünün istemci gezinmeleri sırasında tarayıcıda, ayrıca isteğe bağlı olarak sunucuda render sırasında ya da önceden build zamanında önbelleğe alınabilmesini sağlıyor. İstemci tarafı caching, eklenebilir sunucu tarafı caching ve istek zamanında render etme tek bir sayfa içinde bir arada kullanılabiliyor; böylece önceki App Router sürümlerinin örtük caching davranışının yerini alıyor. Önceki bir sürümde tanıtılan Partial Prefetching artık modelin bir parçası olarak kabul ediliyor. 16.4'te mevcut uygulamalar Cache Components'ı hâlâ Next.js yapılandırmasındaki iki flag ile etkinleştiriyor.

ensureStatic ile statik garantiler

'use cache' statik ve dinamik içeriğin tek bir yanıtta birlikte akıtılmasına izin verdiği için — CDN'den sunulan önceden render edilmiş bir blog yazısının yanında istek zamanında render edilen bir kullanıcı avatarı gibi — tek bir dinamik bileşen, aksi halde optimize edilmiş bir siteyi sessizce yavaşlatabiliyor. Yeni ensureStatic export'u buna karşı koruma sağlıyor. Bunu "navigation" olarak ayarlamak, route'ta herhangi bir dinamik içerik görünürse build'i başarısız kılıyor; böylece bu sayfaya yapılan gezinmeler asla istek zamanında render edilmiyor. Daha az kısıtlayıcı "prefetch" ve "shell" seçenekleri ise sırasıyla açık prefetch'leri ve bir route'un ilk keşfedilmesini kapsıyor.

Bu ayar bir layout üzerinde de bildirilebilir ve altındaki her sayfaya uygulanabilir; ardından dinamik içeriğin gerekli olduğu noktalarda iç içe layout'lara taşınabilir. Ekip bunu e-ticaret mağazaları, pazarlama sayfaları ve bloglar için bir maliyet koruması olarak konumlandırırken, birçok dinamik uygulamanın buna ihtiyaç duymayacağını da belirtiyor.

Prefetch sonrasına ertelenen işler

İkinci ekleme prefetch ekonomisini ele alıyor. Link hedeflerini prefetch etmek yükleme durumlarını ortadan kaldırıyor, ancak kullanıcının hiç açmayacağı sayfalar için pahalı içeriği çekebiliyor — örneğin bir e-posta istemcisinin görünür her mesaj dizisini prefetch etmesi gibi. Yeni navigasyon API'si, geliştiricilerin navigation() beklenerek bir içeriği prefetch dışında bırakmasına olanak tanıyor: e-posta örneğinde yalnızca dizinin ilk mesajı prefetch edilir, geri kalanı gerçek gezinmede veritabanından yüklenir.

Tamamlayıcı bir prefetch() API'si ise, aksi halde bir route'un shell'inde duracak önbelleğe alınmış içeriği, Link prefetch veya useRouter().prefetch() üzerinden açık bir prefetch gerçekleşene kadar erteliyor. Bu iki API birlikte, uygulamaların bir gezinmenin her aşamasında hevesli ve tembel render arasındaki dengeyi ayarlamasını sağlıyor.

Agent destekli geçiş

Mevcut kod tabanları için Next.js, agentic araçlara yaslanıyor. Yeni next upgrade --agent komutu, agent'lara bir uygulamayı yükseltmeye dair sürüme özgü rehberlik sunarken, özel Skills'ler agent'ların Cache Components benimsemesi için gereken refactor'ları yönetmesine yardımcı oluyor. Ekip bunu, Next.js'i uygulamaları sürekli olarak güvenli ve güncel tutan bir sistem haline getirme yönündeki daha geniş bir yatırımın parçası olarak çerçeveliyor.

Sürüm ayrıca tüm Next.js uygulamaları için hazır gelen iyileştirmeler de içeriyor: geliştirmede daha düşük bellek ve disk kullanımı, kısalan derleme süreleri, daha küçük production bundle'ları ve React 19.3.

Neden önemli

App Router'ın örtük caching'i, Next.js'te en süregelen kafa karışıklığı kaynaklarından biri oldu — geliştiriciler çoğu zaman neyin, nerede önbelleğe alındığını ve bir sayfanın neden dinamik hale geldiğini bilmiyordu. Cache Components bunu açık, birleştirilebilir direktiflerle değiştiriyor ve 16.4, geri çekilmek için kalan nedenleri ortadan kaldırıyor. ensureStatic ve navigation/prefetch API'leri önemli, çünkü tek bir modelin iki uçta da çalışmasını sağlıyorlar: istek zamanında render için asla ödeme yapmaması gereken tamamen statik siteler ve hevesli bir prefetch'in tam olarak neye mal olacağını kontrol etmesi gereken yüksek dinamik uygulamalar. Next.js 17'nin bunu varsayılan yapmaya hazırlanması ve agent araçlarının geçişi kolaylaştırmasıyla 16.4, fiilen App Router'ın özgün caching hikayesinin emekliye ayrıldığı sürüm oluyor.