SSR vs SSG vs SPA Mode
ssr:true/false, nitro prerender, generate command, hybrid rendering per route.
SSR vs SSG vs SPA Mode is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Rendering Modes Overview
Nuxt can render your app three ways: SSR (server renders each request), SSG (pages pre-built at build time), and SPA (everything renders in the browser). You can even mix them per route.
SSR: The Default
With ssr: true (the default), the server renders HTML for each request and the client hydrates it. This gives fast first paint and good SEO because crawlers see full markup.
// nuxt.config.ts
export default defineNuxtConfig({
ssr: true
})When SSR Shines
SSR fits content that changes often or is personalized — dashboards, feeds, e-commerce with live pricing — where you want fresh HTML on every request.
SPA Mode
Setting ssr: false turns Nuxt into a single-page app: the server sends an empty shell and the browser renders everything. Simpler to host, but weaker SEO and slower first paint.
export default defineNuxtConfig({
ssr: false
})When SPA Fits
SPA mode suits internal tools and apps behind a login, where SEO does not matter and you want to deploy as static files to any CDN.
SSG: Static Site Generation
Running nuxt generate pre-renders every page to static HTML at build time. The result is a folder of files you can host anywhere with no Node server.
npx nuxt generate
# outputs static HTML to .output/publicWhen SSG Fits
SSG is perfect for content that rarely changes — blogs, docs, marketing sites. Pages are blazing fast and cheap to serve from a CDN.
Per-Route Rendering With routeRules
The routeRules config sets the rendering mode per path pattern. This is hybrid rendering: different parts of one app use different strategies.
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/admin/**': { ssr: false },
'/blog/**': { swr: 3600 }
}
})Common routeRules Options
prerender: true bakes the page at build time; ssr: false makes it SPA; swr: n caches the SSR result for n seconds (stale-while-revalidate); redirect sends users elsewhere.
Incremental Static Regeneration
The isr option pre-renders on first request and caches the output, regenerating periodically. It blends SSG speed with the freshness of SSR for popular pages.
routeRules: {
'/products/**': { isr: 600 }
}Choosing a Strategy
Start with SSR for the best default of SEO plus interactivity. Use SSG for static content, SPA for private apps, and routeRules to fine-tune individual routes as performance needs emerge.
Quick Check
Test your knowledge of rendering modes.
Recap
You learned rendering modes:
- SSR (default) renders per request: good SEO and fast first paint.
- ssr:false gives an SPA for private apps.
- nuxt generate produces a static SSG site.
- routeRules enables hybrid rendering: prerender, swr, isr, ssr:false per route.
Frequently asked questions
Is the “SSR vs SSG vs SPA Mode” lesson free?
Yes — the full text of “SSR vs SSG vs SPA Mode” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “SSR vs SSG vs SPA Mode”?
ssr:true/false, nitro prerender, generate command, hybrid rendering per route. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “SSR vs SSG vs SPA Mode” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.