Next.js'in kutudan çıktığı haliyle sundukları

  • Veri önbelleği (Data cache) – Next.js 13+ sürümünde her fetch() çağrısı istek başına bir bellek önbelleğine (memory cache) düşer. Bir revalidate seçeneği eklemek, çalışma zamanına (runtime) verileri belirli bir aralıktan sonra yenilemesini söyler; böylece "sıcak" (hot) bir API çağrısı, yalnızca ihtiyaç duyulduğunda "soğuk" (cold) bir çağrıya dönüştürülür.
  • Tam rota önbelleği (Full-route cache) – Framework, işlenmiş (rendered) HTML'i ve tüm bir rota için gereken verileri kalıcı hale getirir. Geri dönen ziyaretçiler anında geçiş görürler çünkü sunucu yeniden işleme (re-rendering) adımını atlar.
  • ISR – Eski sürüm trafik sunmaya devam ederken, statik sayfalar arka planda yeniden oluşturulur. Bu, içerik her değiştiğinde tam bir yeniden derleme (rebuild) yapmadan büyük bir siteyi statik tutmanıza olanak tanır.
  • Server Component cache() – React'in cache yardımcısı, maliyetli hesaplamaları veya veritabanı bağlantılarını tek bir istek süresince önbelleğe alır (memoize eder), böylece bir sayfanın bileşen ağacı (component tree) içinde mükerrer iş yapılmasını önler.

Bu önbellekler "ilk erişim" (first-hit) sorununu çözer ancak hala Node sürecinin (process) içinde yaşarlar. Sunucuyu ve veritabanını korumak için önbelleğe alma işlemini dış katmanlara doğru itin.

Ekleyebileceğiniz harici katmanlar

Katman Ne saklar Tipik araçlar Nasıl yardımcı olur
CDN Statik varlıklar, HTML, API JSON Cloudflare, Akamai, AWS CloudFront İçeriği uç noktalara (edge locations) taşıyarak kullanıcıya olan gidiş-dönüş süresini (round-trip) kısaltır
Ters vekil sunucu (Reverse proxy) Sayfa yanıtlarının tamamını Node'a ulaşmadan önce Nginx, Varnish Önbelleğe alınmış sayfaları doğrudan sunarak Next.js örneği (instance) üzerindeki yükü azaltır
Uygulama düzeyinde önbellek Maliyetli DB sorgularının veya API çağrılarının sonuçları Redis, Memcached Sunucu yeniden başlatıldığında silinmeyen ve birden fazla uygulama örneği arasında paylaşılabilecek hızlı bir anahtar-değer (key-value) deposu sağlar

Her katman kaynak veritabanından daha uzakta yer alır; bu nedenle bir seviyedeki önbellek kaçırma (miss) durumu bir sonrakine aktarılır ve nihayetinde veritabanına yalnızca kesinlikle gerekli olduğunda ulaşılır.

Önbellekleri güncel tutmak

Geçersiz kılma (Invalidation) işlemi çoğu ekibi zorlar. Üç pratik desen iyi sonuç verir:

  • Zamana dayalı (TTL) – Bir önbellek girişine sabit bir son kullanma süresi atayın. Yapılandırması basittir ancak zamanlayıcı sona erene kadar güncel olmayan veriler sunabilir.
  • Olay güdümlü (Event-driven) – İçerik değiştiğinde bir webhook yayınlayan CMS'nize veya herhangi bir veri kaynağına bağlanın. Webhook, ilgili önbellek girişinin temizlenmesini (purge) tetikler.
  • Etiket tabanlı (Tag-based) – Bir grup fetch işlemine mantıksal bir etiket ekleyin (örneğin, product-list). Bu gruptaki herhangi bir öğe değiştiğinde, revalidateTag('product-list') çağrısı aynı etiketi paylaşan tüm girişleri temizler.

Bu yaklaşımları karıştırmak, güncellik ile önbellek isabet oranları (cache-hit rates) arasında denge kurmanızı sağlar.

Çoğu ekip için işe yarayan hiyerarşi

  1. Tarayıcı önbelleği (Browser cache) – Statik varlıklar (CSS, JS, görseller) uzun bir max-age alır, böylece kullanıcının cihazı ağa tekrar istek göndermez.
  2. CDN – Uç noktalar (edge nodes), Next.js'te ayarladığınız Cache-Control başlıklarına uyarak tam HTML sayfalarını ve API JSON verilerini önbelleğe alır.
  3. Ters vekil sunucu (Reverse proxy) – Bir Nginx veya Varnish örneği, Next.js sunucusunun önünde durarak nadiren değişen rotalar için önbelleğe alınmış yanıtlar sunar.
  4. Next.js dahili önbelleği – Framework'ün veri ve rota önbellekleri, istek başına memoization ve ISR işlemlerini yönetir.
  5. Uygulama önbelleği – Redis, sorgu parametreleri veya etiketlerle anahtarlanmış ağır veritabanı sorgularının sonuçlarını saklar.
  6. Veritabanı – Nihai gerçeklik kaynağıdır; yalnızca her üst seviyede bir önbellek kaçırma (cache miss) durumunda sorgulanır.

Bir istek geldiğinde, bir katman yanıt verene kadar bu listede aşağı doğru ilerler. En hızlı yanıt kazanan olur ve yanıt, gelecekteki erişimler için zincir boyunca yukarı doğru yazılır.

Parçaları bir araya getirme

  1. API rotalarınızda Cache-Control başlıklarını ayarlayın
  2. CDN'inizi yapılandırın – HTML ve JSON uç noktaları için uç önbelleğe almayı (edge caching) etkinleştirin ve CDN'in Cache-Control başlıklarına uyduğundan emin olun.
  3. Bir ters vekil sunucu (reverse proxy) dağıtın – Next.js sunucunuzun önüne Nginx yerleştirin.
  4. Redis ekleyin – Maliyetli veritabanı sorgularının sonuçlarını önbelleğe alın.
  5. Bileşenlerinizde revalidateTag kullanın – Belirli bir etiket için Next.js dahili önbelleğini temizlemek üzere revalidateTag fonksiyonunu çağırın.

Özet

Next.js içindeki tek bir önbellek ilk isteği hızlandırır, ancak gerçek ölçeklenebilirlik disiplinli bir yığından (stack) gelir: tarayıcı → CDN → ters vekil sunucu → framework → Redis → veritabanı. Her katmanı yapılandırın, geçersiz kılma işlemini zaman, olaylar ve etiketlerle yönetin ve metriklerinizi takip edin. Arka uç (backend) trafik dalgalanmalarına dayanırken gecikme (latency) düşük kalacaktır.