Nuxt Tip: Rendering Modes

Nuxt 3 offers three different rendering modes:

• Client-side rendering
• Universal rendering
• Hybrid rendering

Client-Side Rendering

Per default, a Vue.js application is rendered in the browser (or client). Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface.

Read about the Pros & Cons.

Universal Rendering

By enabling universal (client-side + server-side) rendering, the server returns a fully rendered HTML page to the browser when the browser requests a URL.

In contrast to client-side rendering, users immediately get the application's content (similar to traditional server-side rendering).

To avoid losing the benefits of client-side rendering, the client loads the JavaScript code on the server in the background once the HTML document has been downloaded. The browser interprets it again, and Vue takes control of the document and enables interactivity. Hence it's called hence Universal rendering.

Universal rendering allows a Nuxt application to provide quick page load times while preserving the benefits of client-side rendering.

Read about the Pros & Cons.

Hybrid Rendering

Hybrid rendering allows different caching rules per route using route rules and decides how the server should respond to a new request on a given URL.

Route rules allow us to define rules for a group of Nuxt routes, change rendering mode or assign a cache strategy based on a route.

Let's take a look at an examplary configuration:

1export default defineNuxtConfig({
2  routeRules: {
3    // Static page generated on-demand, revalidates in background
4    '/blog/**': { swr: true },
5    // Static page generated on-demand once
6    '/articles/**': { static: true },
7    // Set custom headers matching paths
8    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
9    // Render these routes with SPA
10    '/admin/**': { ssr: false },
11    // Add cors headers
12    '/api/v1/**': { cors: true },
13    // Add redirect headers
14    '/old-page': { redirect: '/new-page' },
15    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } },
16  },
17})

You can define the following route rule options:

• redirect - Define server-side redirects.
• ssr - Disables server-side rendering for sections of your app and make them SPA-only with ssr: false
• cors - Automatically adds cors headers with cors: true - you can customize the output by overriding with headers
• headers - Add specific headers to sections of your site - for example, your assets
• static - Enables a single (on-demand) build
• swr - Enables a static build that lasts for a configurable TTL (currently enables full incremental static generation on Netlify, with Vercel coming soon)

For more details, check the corresponding Nitro docs.