← Geri

💾 Cache Stratejisi

Görsel optimizasyonun en kritik parçası: doğru cache stratejisi.

🏗️ Cache Katmanları

1🌐Browser Cache

Kullanıcının kendi tarayıcısında saklanır.

  • En hızlı erişim (0ms)
  • Her kullanıcıya özel
  • Cache-Control header ile kontrol edilir
Network'te kontrol: Size sütununda (disk cache) veya (memory cache)
↓
2☁️CDN / Edge Cache

Cloudflare'ın global ağında (300+ lokasyon) saklanır.

  • Kullanıcıya en yakın noktadan servis
  • Tüm kullanıcılar ortak faydalanır
  • İlk kullanıcı origin'e gider, sonrakiler edge'den alır
Response header'da kontrol: CF-Cache-Status: HIT
↓
3🖥️Origin Server (IPX)

Resize işlemi burada yapılır (Sharp/libvips).

  • Sadece cache MISS olduğunda çalışır
  • CPU yoğun işlem (50-200ms)
  • Sonuç CDN'e cache'lenir
Response header'da kontrol: CF-Cache-Status: MISS

🔄 Cache Akışı

1

Kullanıcı /_ipx/w_400/image.jpg ister

→
2

Browser cache'te var mı?

Evet → Hemen göster (0ms)Hayır → Devam
→
3

Cloudflare Edge'de var mı?

Evet → Edge'den al (~20ms)Hayır → Devam
→
4

IPX resize yapar (~100ms)

Sonuç CDN'e cache'lenir

🧪 Canlı Test

Test Adımları:

  1. F12 → Network sekmesini aç
  2. "Disable cache" seçeneğinin KAPALI olduğundan emin ol
  3. Aşağıdaki "Resmi Yükle" butonuna tıkla
  4. Network'te resmi bul, Headers sekmesine bak
  5. Tekrar tıkla ve farkı gör

📋 Önemli Response Headers

HeaderDeğerAnlam
CF-Cache-StatusHIT✅ Cloudflare edge'den geldi
CF-Cache-StatusMISS⚠️ Origin'e gitti, cache'lendi
CF-Cache-StatusDYNAMIC🔶 Cache'lenemedi (config eksik?)
Cache-Controlpublic, max-age=31536000✅ 1 yıl cache
Age3600Edge cache'te 1 saat olmuş

⚙️ Önerilen Konfigürasyon

nuxt.config.ts

export default defineNuxtConfig({
  // Route bazlı cache kuralları
  routeRules: {
    // IPX görselleri için agresif cache
    '/_ipx/**': {
      headers: {
        'cache-control': 'public, max-age=31536000, immutable'
      }
    }
  },

  // Cloudflare Pages için
  nitro: {
    preset: 'cloudflare-pages'
  }
})

public/_headers (Cloudflare Pages için alternatif)

# Tüm IPX görselleri için
/_ipx/*
  Cache-Control: public, max-age=31536000, immutable

# Static assets
/assets/*
  Cache-Control: public, max-age=31536000, immutable

🔍 Cache-Control Direktifleri

public

CDN ve browser cache'leyebilir

private

Sadece browser cache'leyebilir (kişisel data)

max-age=31536000

1 yıl (saniye cinsinden) cache'te tut

immutable

İçerik değişmez, tekrar kontrol etme

s-maxage=86400

CDN için ayrı süre (1 gün)

stale-while-revalidate=60

Eski veriyi göster, arka planda güncelle

🔧 Sorun Giderme

❌ CF-Cache-Status: DYNAMIC görüyorum

Cache-Control header'ı eksik veya yanlış. routeRules veya _headers dosyasını kontrol et.

❌ Her seferinde MISS alıyorum

Farklı URL parametreleri cache'i bozar. ?v=123 gibi query string'ler her seferinde yeni cache oluşturur.

❌ Browser cache çalışmıyor

DevTools açıkken "Disable cache" otomatik aktif olabilir. Kapat veya Incognito pencerede test et.

❌ Localhost'ta cache yok

Normal! Cloudflare Edge cache sadece production'da çalışır. Local'de sadece browser cache test edilebilir.

📝 Özet

  • Browser cache: Size sütununda (disk cache)
  • Edge cache: Header'da CF-Cache-Status: HIT
  • Hedef: İlk kullanıcı dışında herkes cache'ten alsın
  • IPX URL değişirse: Yeni cache oluşur (farklı boyut = farklı cache)