Configuring routeRules for Hybrid Rendering SEO in Nuxt

Map each section of a Nuxt site to the rendering mode that matches its content volatility, so crawlers get fresh, cacheable HTML without over-rendering stable pages.

When to Use This Approach

Configure hybrid routeRules when your Nuxt project has:

• Mixed content volatility — a static homepage, hourly-changing blog, and near-real-time product pages that each need a different freshness strategy.
• Per-section caching needs — you want the CDN to cache marketing pages aggressively while revalidating listings, which ties into edge caching behavior for SEO.
• Per-route headers or redirects — you need cache-control or 301 consolidation on specific paths without writing bespoke middleware.

Implementation Steps

Step 1: Define routeRules patterns

Add a routeRules map keyed by URL globs so each section is handled independently:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': {},
    '/blog/**': {},
    '/products/**': {},
  },
});

Validation: Run nuxi build and confirm the build completes without a “no matching rule” warning for any route.

Step 2: Choose a rendering mode per section

Assign a mode to each pattern based on how often the content changes:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // static, rebuilt on deploy
    '/blog/**': { isr: 3600 },         // regenerate at most hourly
    '/products/**': { swr: 300 },      // stale-while-revalidate 5 min
    '/account/**': { ssr: false },     // client-only, not indexable
  },
});

Validation: curl -sI https://example.com/blog/my-post | grep -i 'age' — an incrementing age on repeat requests confirms the isr cache is active.

Step 3: Set cache-control and canonical headers

Attach a headers object so the CDN caches HTML correctly for crawlers:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': {
      isr: 3600,
      headers: {
        'cache-control': 's-maxage=3600, stale-while-revalidate=60',
      },
    },
  },
});

Validation: curl -sI https://example.com/blog/my-post | grep -i 'cache-control' must return the exact s-maxage value set above.

Step 4: Add redirects in routeRules

Consolidate legacy paths with a declarative 301, no middleware required:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/old-blog/**': { redirect: { to: '/blog/**', statusCode: 301 } },
    '/legacy-product': { redirect: { to: '/products/current', statusCode: 301 } },
  },
});

Validation: curl -sI https://example.com/legacy-product | grep -i 'location\|http/' — expect 301 with a Location pointing to the new path.

Step 5: Validate the applied mode per route

Confirm each route resolved to the mode you intended by reading its response headers:

# Compare a prerendered route, an ISR route, and an SSR route
for path in / /blog/my-post /account/settings; do
  echo "== ${path} =="
  curl -sI "https://example.com${path}" | grep -i 'cache-control\|age\|x-nitro'
done

Validation: Prerendered and isr/swr routes expose CDN cache headers; the ssr: false route should not be treated as indexable content.

SEO Impact Summary

Measurable signals to watch:

• Response age header increments on isr/swr routes, confirming cache hits rather than cold renders.
• GSC Crawl Stats: average response time should drop once volatile routes move off pure ssr.
• 404 rate on legacy paths should fall to zero once redirect rules are deployed.

Edge Cases and Gotchas

ISR windows interact with CMS publish timing An isr: 3600 route can serve content up to an hour stale. If editors expect instant updates, either shorten the window or purge the route’s cache on the CMS publish webhook. Choosing the window is the same tradeoff analysis covered in ISR vs SSG vs CSR routing.

More specific globs must be ordered with care Nuxt resolves routeRules so that a rule for /blog/featured can override the broader /blog/**. If a specific route inherits the wrong mode, add an explicit narrower entry rather than relying on ordering assumptions.

ssr: false silently removes content from the index It is tempting to disable SSR for an interactive dashboard, but if any crawlable content lives on that route it will vanish from the rendered HTML. Reserve ssr: false for authenticated or purely interactive areas, and keep marketing and content routes on a server-rendered mode.

Redirect globs need matching wildcards A redirect from /old-blog/** to /blog/** preserves the trailing path segments only when both sides use the wildcard. Omitting the wildcard on the destination sends every legacy URL to a single page, collapsing distinct pages into one and losing their individual link equity.

Frequently Asked Questions

What rendering modes does routeRules support? routeRules supports prerender for build-time static HTML, isr for incremental static regeneration on a revalidation window, swr for stale-while-revalidate edge caching, and the default ssr for on-demand server rendering. Setting ssr: false produces a client-only shell that should be reserved for non-indexable routes.

Can routeRules set cache headers and redirects? Yes. Each rule accepts a headers object for cache-control and other response headers, and a redirect object with a target and statusCode. This keeps per-route caching and 301 consolidation declarative in nuxt.config instead of spread across middleware, which is easier to audit for edge caching behavior for SEO.

How do I verify which mode a route used? curl the route with headers shown and inspect cache-control and age. An age header that increments on repeat requests indicates isr or swr caching, while a fresh render each time indicates ssr. Prerendered routes are served as static files with CDN cache headers.

Part of: Nuxt SEO Configuration

Related

• Edge Caching Behavior for SEO — how the CDN caches the HTML your routeRules headers describe
• ISR vs SSG vs CSR Routing — pick the freshness strategy behind each rendering mode
• Nuxt SEO Configuration — the full metadata, canonical, and sitemap setup this fits into