ISR vs SSG vs CSR Routing

Routing architecture dictates how search engines discover, render, and cache your application. Selecting the correct execution model directly impacts crawl efficiency, indexation velocity, and Core Web Vitals. This guide provides implementation workflows, framework-specific APIs, and validation protocols for modern headless deployments.

Routing Architecture & Rendering Directives

Route-level rendering boundaries must be defined before data-fetching layers initialize. Path resolution determines whether the edge, origin, or client executes the template.

Implementation Workflow:

  1. Map URL patterns to rendering modes in your framework config.
  2. Assign explicit execution flags (prerender, ssr, client) per route.
  3. Configure middleware to intercept bot traffic and enforce routing rules.
  4. Inject route-specific HTTP headers at the edge or origin.

Required Headers & CDN Directives:

  • Content-Type: text/html; charset=utf-8 — mandatory for HTML delivery
  • Vary: Accept-Encoding — prevents unnecessary cache fragmentation (do not vary on User-Agent unless you serve different content)
  • X-Robots-Tag: index, follow — explicit crawler permission
  • Cache-Control: public, max-age=0, s-maxage=3600 — edge caching with origin fallback

Contextualize these boundaries within broader Headless Architecture & Rendering Strategy Fundamentals to isolate routing configuration from downstream data-fetching layers.

Validation Step: Run curl -I https://example.com/target-route and verify Content-Type matches text/html. Confirm middleware routing logs show zero 302/307 redirects for canonical paths.

SSG Routing: Build-Time Path Generation

Static Site Generation enumerates paths during compilation. The framework outputs deterministic HTML files to the CDN origin.

Implementation Workflow:

  1. Define a static path generator function to return all valid slugs.
  2. Configure build-time sitemap injection to expose routes immediately.
  3. Apply exclusion patterns for draft, admin, or parameter-heavy paths.
  4. Monitor build duration and route count against CI/CD thresholds.

When route enumeration exceeds build timeouts or memory limits, consult Indexation Limits for Decoupled Sites to prevent pipeline failures and orphaned paths.

Framework Configurations

Next.js App Router Static Route Generation

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  return [{ slug: 'product-a' }, { slug: 'product-b' }];
}

export default function Page({ params }) {
  /* render content for params.slug */
}
  • SEO Impact: Ensures deterministic HTML delivery for crawlers at instant TTFB, with no per-request server work.
  • Validation: Execute curl -s https://domain.com/blog/product-a | grep '<title>'. Verify the response contains fully rendered markup and returns 200 OK.

SvelteKit Prerender

// src/routes/blog/[slug]/+page.js
export const prerender = true;
// svelte.config.js — set Cache-Control via adapter or platform config
// Vercel adapter example: add vercel.json headers
// { "headers": [{ "source": "/blog/(.*)", "headers": [{ "key": "Cache-Control", "value": "public, max-age=3600, stale-while-revalidate=86400" }] }] }
  • SEO Impact: Locks routes to static generation at build time while CDN headers manage freshness. Reduces origin load and guarantees consistent crawl responses.
  • Validation: Inspect dist/ for .html output. Confirm CDN response headers match the configured Cache-Control values.

ISR Routing: On-Demand & Time-Based Regeneration

Incremental Static Regeneration decouples content freshness from build cycles. Routes serve cached HTML until revalidation windows expire.

Implementation Workflow:

  1. Set time-based revalidate intervals per route pattern.
  2. Deploy on-demand revalidation webhooks triggered by CMS events.
  3. Set dynamicParams = true to allow fallback generation for unknown slugs.
  4. Implement route-level cache tags for granular CDN purging.

Compare implementation tradeoffs against sibling guidance in How to Choose Between ISR and SSG for SEO to align routing with content velocity.

Framework Configuration

Nuxt/Nitro Hybrid Route Rules

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/products/**': { swr: 1800 },
    '/docs/**': { prerender: true },
  },
});
  • SEO Impact: Granularly assigns SSG/ISR per route pattern. Prevents mixed-content penalties and optimizes crawler resource allocation.
  • Validation: Trigger a CMS webhook. Monitor Nitro edge logs for SWR state transitions. Verify Age header increments until the swr threshold expires.

CDN ISR Headers:

  • Surrogate-Control: max-age=1800, stale-while-revalidate=3600
  • Cache-Tag: product-list, category-electronics
  • Validation: Use curl https://domain.com/api/revalidate -X POST -H "Authorization: Bearer $SECRET" to trigger on-demand revalidation. Cross-check GSC URL Inspection for updated last-modified timestamps.

CSR Routing: SPA Navigation & Hydration Workflows

Client-Side Rendering shifts route resolution to the browser. The initial payload contains a minimal shell with JavaScript-driven navigation.

Implementation Workflow:

  1. Implement client router components (<Link>, useRouter) for instant transitions.
  2. Configure dynamic chunk splitting to defer non-critical JS.
  3. Deploy prerendered fallback shells for initial crawler requests.
  4. Apply bot-specific routing rules to serve static snapshots when needed.

Mitigate discovery latency and reference Crawl Budget Impact in Headless when JS-dependent routing delays indexation.

Framework Configuration

Astro Hybrid Routing with Hydration Boundaries

---
// src/pages/blog/[slug].astro
export const prerender = true;
---
  • SEO Impact: Delivers fully rendered HTML for SEO while deferring JS execution to post-hydrate. Preserves LCP and crawl efficiency.
  • Validation: Disable JavaScript in DevTools. Verify <StaticContent> remains visible. Confirm client:load scripts only fire after DOM ready.

Required CSR Headers:

  • X-Frame-Options: SAMEORIGIN — prevents clickjacking during hydration
  • Content-Security-Policy: script-src 'self' — controls hydration execution (avoid 'unsafe-inline' where possible)
  • Validation: Run Lighthouse with throttled 3G. Ensure First Contentful Paint occurs before hydration completes. Verify <a href> attributes exist in raw HTML for crawler link discovery.

Critical Routing Pitfalls & Remediation

  • Mixed rendering modes on identical route patterns: Causes duplicate or conflicting HTML payloads. Enforce strict route-level directives in framework config. Validate with curl to confirm consistent Content-Type: text/html across requests.
  • ISR fallback pages returning 404 during cache misses: Blocks crawler access. Set dynamicParams = true in Next.js App Router (or fallback: 'blocking' in Pages Router). Monitor CDN edge logs for MISS/STALE states to prevent indexation of incomplete pages.
  • CSR-only routing blocking search engine link discovery: Increases JS execution budget and delays indexation. Implement hybrid routing with prerendered fallbacks, expose explicit <a href> links in initial HTML, and use robots.txt to block non-critical JS-heavy routes.

Technical SEO Validation & FAQ

Q: How do I validate that routing strategies deliver SEO-compliant HTML? A: Use GSC URL Inspection, curl -s <url> | grep '<title>', and crawler simulation tools to verify raw HTML payload, status codes, and canonical routing consistency.

Q: When should routing shift from SSG to ISR? A: Transition when route enumeration exceeds build timeouts, content update frequency outpaces build cycles, or when on-demand regeneration without full rebuilds becomes necessary.

Q: Does CSR routing inherently harm crawl budget? A: Yes, if crawlers must execute JavaScript to resolve internal links. Mitigate by implementing prerendered route shells, explicit sitemap routing, and deferring heavy JS hydration until after initial crawl pass.