Server-Side Rendering

SSR is Nuxt's default mode — fetch on the server, render HTML, ship a hydratable client bundle so the page becomes fully interactive.

4 min read Level 2/5 #nuxt#ssr

What you'll learn

Recognize that SSR is the default — no flag needed
Build and preview a Nuxt SSR app locally
Inspect the first-byte HTML to confirm SSR

Server-side rendering is the default in Nuxt. Every request runs your page components on the server, returns fully-rendered HTML, and the client hydrates from a serialized payload.

What “Default” Means

You do not flip a flag. Just nuxi dev or nuxi build and your app is SSR. The relevant config is the absence of ssr: false:

// nuxt.config.ts
export default defineNuxtConfig({
  // ssr: true  — already the default
})

Build & Preview

npx nuxi build
npx nuxi preview

build produces a .output/ directory containing a Node server (server/index.mjs) and static assets. preview boots that server locally so you can verify production behavior.

Verify SSR in DevTools

Open your browser’s Network tab, request the page, and look at the response body for the HTML document. You should see your component markup — headings, links, content — already there before any JavaScript executes. Compare that to a SPA where you would see an almost-empty <div id="app">.

When SSR Shines

Personalized content (per-user dashboards, localized prices).
SEO for dynamic pages where SSG would explode the build.
Auth-gated routes where you want server-side redirects.

The trade-off is that you need a Node-compatible runtime in production — but every major host supports it.

Static Site Generation →