Next.js, klasik "SSR mi SSG mi?" ikilemini cache-first bir mimariye dönüştürdü. App Router ile birlikte artık her veri isteği, her sayfa ve hatta her fetch çağrısı varsayılan olarak cache'lenebilir hale geldi.

Bu makalemde;

• Next.js cache nasıl çalıştığını,
• force-cache, revalidate, no-store farklarını,
• Hangi durumda hangisini kullanmam gerektiğini,
• Gerçek projelerde yapılan hataları anlatmaya çalışacağım.

1. Varsayılan Davranış: force-cache

Next.js'te Server Component içinde yapılan her fetch çağrısı varsayılan olarak cache'lenir.

    const products = await fetch('https://api.example.com/products')
        .then(res => res.json());

Ne Olur?

• İlk istekte API'ye gider,
• Gelen sonucu disk cache'e alır,
• Aynı istek tekrar geldiğinde API'ye gitmez,
• Sayfa reload olsa bile veri değişmez.

Not: Bu davranış admin panel, stok, fiyat, sipariş gibi verilerde soruna yol açar.

2. Gerçek Zamanlı Veri: no-store

Bu davranış, çekilen veri asla cache'lenmesin demektir.

    const orders = await fetch('https://api.example.com/orders', { 
        cache: 'no-store' 
    })
        .then(res => res.json());

Ne Olur?

• Her request'te API çağrılır,
• Sayfa tam SSR olur,
• Cache yok, beklemek yok, süpriz yok.

Not: Bu davranış admin panellerde, kullanıcıya özel verilerde, sepette, siparişlerde kullanılır. Blog yazılarında, ürün listelemelerde kullanılması önerilmez.

3. Kontrollü Cache: revalidate

Bu davranış, cache'i zaman bazlı olarak yönetmeyi sağlar.

    const products = await fetch('https://api.example.com/products', {
        next: {
          revalidate: 60, // 60 saniye
        },
    })
        .then(res => res.json())

Ne Olur?

• Veri cache'e alınır,
• 60 saniye boyunca herkes aynı cache'i görür,
• 60 saniye dolunca ilk gelen request veriyi günceller.

4. revalidate vs no-store

5. Next.js Sayfa İçinde Cache Kontrolü

5.1. Statik Sayfa (Varsayılan)

    export default async function Page() {
        return <div>Statik içerik</div>
    }

5.2. Dinamik Sayfa

    export const dynamic = 'force-dynamic'

    export default async function Page() {
        return <div>Her zaman SSR</div>
    }

5.3. Revalidate Sayfa Cache'leme

    export const revalidate = 300

    export default async function Page() {
        return <div>5 dakikada bir güncellenir</div>
    }

6. Cache İle En Çok Yapılan Hatalar

• Yanlış: API tarafında cache kapalı ise, next.js tarafında da kapalıdır.
  Doğru: Next.js kendi cache'ini tutar.

• Yanlış: Client Component'e geçince cache kalkar.
  Doğru: Cache, fetch sırasında belirlenir.

• Yanlış: revalidate: 0 olarak ayarlanırsa, no-store davranışı sergiler.
  Doğru: revalidate: 0 force-cache mantığına girer.

7. Kısa Özet

Sonuç

Next.js uygulamanızda cache mekanizması;

• Doğru kullanılırsa uçurur,
• Yanlış kullanılırsa sessizce bozar.

En temel anlamda cache kavramının anlamı; Hangi verinin ne kadar güncel olması gerekiyor? sorusuna verilen cevaptır.