Nuxt Rendering Modes

up:: Nuxt ⚐

Good article on the different modes with examples: Comparing Nuxt 3 Rendering Modes: SWR, ISR, SSR, SSG, SPA - RisingStack Engineering

This config comes from Nitro: routeRules · Nitro.

// nuxt.config.ts
routeRules: {
  "/": { prerender: true },
  "/*": { prerender: false },
  "/api/*": { prerender: false },
},

• This means that / (the index) is prerendered. There is index.html file that is written in the output directory.
• Also any assets, like images, are prerendered.
• What does prerender: false actually do? Does that mean they are server side rendered?

The rest of the pages are not prerendered. They are server side rendered. When a user goes on the /about page, a request is sent to the server. The server then sends the webpage back.

• So does that mean if we get content from a CMS via an API that it will always be updated? I guess so.
• How do Hydration Errors fit into here? Is the payload from the server and the actually rendered page on the client compared?

Two fundamental rendering modes

• Universal Rendering: The site is rendered on the server and on the client. This is where hydration happens
• Client-Side Rendering: The site only renders on the client.

Client-Side Rendering

Aka Single Page Application.