Hybrid Rendering With routeRules

routeRules in nuxt.config lets you choose prerender, ssr, spa, swr, or isr — per route pattern, with optional headers and redirects.

4 min read Level 3/5 #nuxt#hybrid#routeRules

What you'll learn

Configure routeRules in nuxt.config
Mix prerender, swr, and isr in a single app
Add headers and redirects per pattern

The killer feature of Nuxt’s rendering model is that you do not commit to one mode. routeRules in nuxt.config lets every URL pattern have its own strategy.

Anatomy

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':            { prerender: true },
    '/about':       { prerender: true },
    '/blog/**':     { swr: 600 },
    '/products/**': { isr: 3600 },
    '/admin/**':    { ssr: false },
    '/api/**':      { cors: true, headers: { 'cache-control': 's-maxage=60' } },
    '/old-path':    { redirect: '/new-path' }
  }
})

Patterns use glob syntax — ** matches any depth.

Available Options

prerender: true — generate at build (SSG behavior).
ssr: false — SPA for this subtree.
swr: <seconds> — cache rendered HTML, serve stale while revalidating.
isr: <seconds | true> — incremental static regen on supported deploys.
headers: { ... } — extra response headers.
redirect: '/new' or { to, statusCode } — 30x redirects.
cors: true — enable permissive CORS for that path.

A Realistic Example

routeRules: {
  '/':              { prerender: true },     // landing
  '/docs/**':       { prerender: true },     // docs site
  '/blog/**':       { swr: 600 },             // blog with 10min freshness
  '/shop/**':       { isr: 3600 },            // catalog, hourly regen
  '/account/**':    { ssr: false },           // user dashboard as SPA
  '/api/secret/**': { cors: false, headers: { 'cache-control': 'no-store' } }
}

This single app serves a marketing site, a blog, a store, and a user dashboard — each with the right trade-offs.

ISR and SWR With routeRules →