Route Rules and Caching Strategies — Static or Dynamic?

Let’s balance performance and SEO

In modern web apps, a crucial decision is whether a page should be static or dynamic.
Nuxt 3 offers an elegant answer: Route Rules.
You can set per-route SSR, prerender, cache, or edge behavior. 😌

This post dives into Nuxt 3’s routeRules system—plus cache strategies that optimize both performance and SEO.

What are routeRules?

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }, // static home
    '/blog/**': { swr: 60 }, // 60s cache
    '/dashboard/**': { ssr: true, cache: false }, // dynamic area
    '/api/**': { cors: true, cache: { maxAge: 300 } } // custom API cache
  }
})

Each route behaves on its own—no one-size-fits-all rendering.

TL;DR: routeRules = “Let every route choose its own destiny.”

Key rule meanings

SSR, SSG, SWR, ISR — what they really mean

SSR (Server-Side Rendering)

• ✅ Great for dynamic data.
• ❌ More server work per request.

SSG (Static Site Generation)

• ✅ Fast, cache-friendly.
• ❌ Requires rebuilds for fresh data.

SWR (Stale While Revalidate)

• ✅ Balance of speed + freshness.
• ✅ Users see old content while the new one is prepared in the background.

ISR (Incremental Static Regeneration)

Example: With /blog/** set to swr: 60, each page is refreshed every 60 seconds.

Example: smart rules for a blog

routeRules: {
  '/': { prerender: true }, // static home
  '/blog': { prerender: true }, // static list
  '/blog/**': { swr: 120 }, // refresh every 2 minutes
  '/admin/**': { ssr: true, cache: false } // fully dynamic admin
}

• Home and blog list are prebuilt (fast TTFB).
• Blog detail pages refresh in the background (SWR).
• Admin stays dynamic.

Cache layers

1. Browser cache: via headers (Cache-Control).
2. Server cache: via Nitro (cache: { maxAge }).
3. CDN cache: Cloudflare, Netlify Edge, Vercel, etc.

Example

'/api/posts': {
  cache: {
    maxAge: 300,   // 5 minutes
    staleMaxAge: 60 // show stale cache during this window
  }
}

💡 Tip: Nitro’s cache works both on server and edge.

Dynamic vs static — decision matrix

Gotchas

• With swr, your data should be idempotent (same request → same response).
• For cached APIs that vary by user (JWT, cookies), beware of cache sharing and leakage.
• Caching SSR routes can show the wrong data to the wrong user—be careful.

Advanced: routeRules + Nitro

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

Conclusion

In short:

• prerender → Static pages
• swr → Fast pages that stay fresh
• ssr → Dynamic areas
• cache → Smart API performance