Rendering modes: SSR, SSG and hybrid

The rendering mode decides where and when a page's HTML is built. By default Nuxt builds it on the server for every request, but different pages benefit from different modes: a post can be built in advance, and an admin area right in the browser. Nuxt lets you choose the mode for the whole site or for individual addresses.

The modes

Mode	When the HTML is built	Good for
SSR, server-side rendering	On every request	Pages with frequently changing data
SSG, static generation	Once, at build time	Pages that rarely change
CSR, client-side rendering	In the browser after JavaScript loads	Private areas that need no search
Hybrid	Differently for different addresses	Most real sites

SSR by default

Nothing to configure: every lesson of this course works this way. The server receives a request, runs the components and useFetch, sends ready HTML, and the browser hydrates it.

Browser only

To build the whole site in the browser, like a plain Vue app, turn SSR off:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false
})

The server then sends an empty page with a script. This suits internal tools, but it is bad for a blog: search engines see the content less well.

Hybrid mode: routeRules

Rules for groups of addresses go into routeRules:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true },
    '/posts/**': { swr: 600 },
    '/admin/**': { ssr: false }
  }
})

Rule	What it does
`prerender: true`	HTML is built at build time and served as a file
`swr: 600`	HTML is cached for 600 seconds and refreshed in the background
`isr: true`	Like the cache, but on platforms that support it, such as Vercel and Netlify
`ssr: false`	The page is built only in the browser
`redirect: '/new-url'`	Redirects to another address

The ** stars mean "this address and everything under it". After npm run build, the home and About pages are ready-made files, posts are cached for 10 minutes, and /admin is built in the browser.

A fully static site

The npm run generate command builds the HTML of every page it can reach through links in advance and puts the result into .output/public/. Such a site can be hosted on any static hosting without Node.js. But the server handlers are gone then: the add-post form will not work.

Browser only for part of a page

If a single component cannot work on the server, wrap it in <ClientOnly> instead of turning SSR off for the whole page.

Common mistake

Turning on prerender: true for a page that depends on the user or changes often, such as the post list. The HTML is built once at build time, and new posts do not appear on that page until the next build. For such pages use plain SSR or swr with a short cache time.

Thanks for reading!