Universal Rendering

up:: Nuxt Rendering Modes

Aka Server Side Rendering.

This has some sub-categories:

• prerender: pages are generated at build time (aka static site generation)
• swr: pages are generated on demand on the server and cached until API response changes
  • ”State While Revalidate”
• isr: pages are generated on demand, cached until the next deployment, usually on CDN
  • ”Incremental Static Regeneration”

How does Nuxt render sites?

• SSR (Nuxt Static rendering modes) : Server side rendered. Request → Server (processing) Server → Client.
  • Fast start up
  • Slow interactions
• SPA: One big JavaScript bundle. Client → Server. Client (processing). This called hydration.
  • Slow initial page load
  • Fast on subsequent trip

Nuxt renders with Universal Rendering

• First render happens SSR. While the site is rendered and you’re browsing around, Nuxt sends though the bundle (like a SPA).

Benefits

• Better for SEO
• Fast browser loading times
• Still gets all SPA benefits

Hybrid Rendering

In the defineNuxtConfig, you can define per route if you want the page to be rendered server-side or client side.