Rendering Modes — Overview

Nuxt supports universal SSR by default, static SSG via nuxi generate, SPA mode for fully client-rendered apps, and hybrid mixing per route with routeRules.

4 min read Level 2/5 #nuxt#rendering#overview

What you'll learn

Recognize the four rendering modes and where each shines
See how routeRules picks the mode per route
Pair a mode with a deployment target

One of Nuxt’s strengths is that it does not force you to pick a rendering strategy upfront — you can mix them per route as your app evolves.

The Four Modes

SSR (default) — render HTML on every request, hydrate on the client.
SSG — pre-render every route at build time (nuxi generate).
SPA — ssr: false, ship a client-only bundle.
Hybrid — per-route mix via routeRules (prerender, swr, isr, spa).

Picking via routeRules

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // SSG
    '/blog/**': { swr: 600 },           // SSR + 10min cache
    '/dashboard/**': { ssr: false },    // SPA
    '/api/**': { cors: true }           // SSR + CORS headers
  }
})

Choosing a Mode

Personalized, frequently-changing data with auth gates — SSR.
Marketing pages, blog, docs — SSG or hybrid SWR.
Internal admin panels behind auth — SPA is fine; SEO does not matter.
Mostly static with occasional updates — ISR/SWR.

Deployment Pairing

SSR — Node, Deno, edge runtimes (Cloudflare Workers, Vercel, Netlify).
SSG — static hosts (Cloudflare Pages, Netlify, S3+CloudFront).
Hybrid — modern adaptive deploys (Vercel, Netlify, Cloudflare).

The same code can target any of these; only nuxt.config and the deploy preset change.

Server-Side Rendering →