Route Rules ve Caching Stratejileri - Static mi Dynamic mi?

Performans ve SEO dengesini kuralım.

Modern web uygulamalarında en kritik karar: sayfa statik mi render edilecek, yoksa dinamik mi?
Nuxt 3 bu soruna zarif bir çözüm sunuyor: Route Rules (yönlendirme kuralları).
Her sayfa veya API için özel SSR, prerender, cache veya edge davranışları tanımlayabilirsin. 😌

Bu yazıda Nuxt 3’ün routeRules sistemini derinlemesine inceliyoruz -- hem performansı hem de SEO’yu optimize eden cache stratejileriyle birlikte.

routeRules Nedir?

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // statik anasayfa
    '/blog/**': { swr: 60 }, // 60 sn cache
    '/dashboard/**': { ssr: true, cache: false }, // dinamik alan
    '/api/**': { cors: true, cache: { maxAge: 300 } } // API için özel cache
  }
})

Her route kendi davranışına sahip olabilir. Artık tek tip render zorunluluğu yok.

Özet: routeRules = "Her route’un kendi kaderi olsun."

Önemli Kuralların Anlamı

SSR, SSG, SWR, ISR: Kısaltmaların Gerçek Anlamı

SSR (Server-Side Rendering)

• ✅ Dinamik veriler için uygundur.
• ❌ Her istekte yük artar.

SSG (Static Site Generation)

• ✅ Hızlı, cache dostu.
• ❌ Dinamik veriler için manuel rebuild gerekir.

SWR (Stale While Revalidate)

• ✅ Hız + tazelik dengesi.
• ✅ Kullanıcı eski içeriği görürken arka planda yenisi hazırlanır.

ISR (Incremental Static Regeneration)

Örnek: /blog/** için swr: 60 dersen, her 60 saniyede bir sayfa yeniden oluşturulur.

Örnek: Blog Sitesi için Akıllı Kurallar

routeRules: {
  '/': { prerender: true }, // statik anasayfa
  '/blog': { prerender: true }, // statik liste
  '/blog/**': { swr: 120 }, // her 2 dakikada yenilenen içerik
  '/admin/**': { ssr: true, cache: false } // dinamik admin panel
}

• Anasayfa ve blog listesi build sırasında oluşturulur (hızlı açılış).
• Blog detay sayfaları arka planda düzenli olarak yenilenir (SWR).
• Admin panel ise tamamen dinamik kalır.

Cache Katmanları

1. Browser Cache: Tarayıcı bazlı, header üzerinden (Cache-Control).
2. Server Cache: Nitro üzerinden (cache: { maxAge }).
3. CDN Cache: Cloudflare, Netlify Edge, Vercel gibi platformlar.

Örnek:

'/api/posts': {
  cache: {
    maxAge: 300, // 5 dakika
    staleMaxAge: 60 // bu sürede eski cache gösterilebilir
  }
}

💡 İpucu: Nitro cache sistemi hem server hem edge ortamlarında sorunsuz çalışır.

Dynamic vs Static -- Karar Matrisi

Dikkat Edilmesi Gerekenler

• swr kullanıyorsan, data idempotent olmalı (aynı istek aynı sonucu döndürmeli).
• cache’li API’lerde kullanıcı bazlı içerik (örneğin JWT token) varsa dikkat et; cache paylaşımı güvenlik riski oluşturabilir.
• SSR route’larında cache: true kullanmak, kullanıcıya yanlış veri gösterebilir.

İleri Seviye: routeRules + Nitro

routeRules: {
  '/api/**': { cache: { maxAge: 60 }, headers: { 'x-powered-by': 'Nuxt Nitro' } }
}

Sonuç

Kısaca:

• prerender → Statik sayfalar
• swr → Güncellenen ama hızlı sayfalar
• ssr → Dinamik alanlar
• cache → Akıllı API performansı