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 manifests 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, User-Agent (Prevents cache poisoning across device types)
  • X-Robots-Tag: index, follow (Explicit crawler permission)
  • CDN Rule: 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 Route-Level Override

export async function generateStaticParams() {
  return [{ slug: 'product-a' }, { slug: 'product-b' }];
}
export const revalidate = 3600;
export default function Page({ params }) {
  /* ... */
}
  • SEO Impact: Ensures deterministic HTML delivery for crawlers while enabling background cache updates without full build triggers.
  • Validation: Execute curl -s https://domain.com/product-a | grep '<title>'. Verify the response contains fully rendered markup and returns 200 OK.

SvelteKit Prerender & Adapter Caching

export const prerender = true;
export const config = {
  headers: {
    'Cache-Control': '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: Check network tab for X-SvelteKit-Prerender: true. Confirm CDN response headers match stale-while-revalidate 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. Configure fallback: 'blocking' to prevent 404s during cache misses.
  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

export default defineNuxtConfig({
  routeRules: {
    '/products/**': { prerender: false, 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 swr threshold expires.

CDN ISR Headers:

  • Surrogate-Control: max-age=1800, stale-while-revalidate=3600
  • Cache-Tag: product-list, category-electronics
  • Validation: Use curl -H "X-ISR-Trigger: true" https://domain.com/revalidate and confirm 200 OK response. 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

---
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' 'unsafe-inline' (Controls hydration execution)
  • 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/fetch to confirm consistent Content-Type: text/html and X-Render-Mode headers.
  • ISR fallback pages returning 404 during cache misses: Blocks crawler access. Configure fallback: 'blocking', implement skeleton loaders, and 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 dynamic personalization requires on-demand regeneration without full rebuilds.

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.