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.

Summary

Client-side rendering is a suitable option for web applications with high interactivity, which don't require indexing or are frequently accessed by users. This approach can utilize browser caching to bypass the downloading process on subsequent visits. Examples of such applications include SaaS, back-office applications, and online games.

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.

Summary

The versatility of universal rendering allows it to adapt to a wide range of use cases and is particularly well-suited for content-focused websites such as blogs, marketing sites, portfolios, e-commerce sites, and marketplaces.

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.

Warning

Route rules are still under active development and subject to change.

Since Release Candidate 12, Nuxt 3 has a public beta for hybrid rendering and route rules.

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:

nuxt.config.ts

export default defineNuxtConfig({ routeRules: { // Static page generated on-demand, revalidates in background '/blog/**': { swr: true }, // Static page generated on-demand once '/articles/**': { static: true }, // Set custom headers matching paths '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } }, // Render these routes with SPA '/admin/**': { ssr: false }, // Add cors headers '/api/v1/**': { cors: true }, // Add redirect headers '/old-page': { redirect: '/new-page' }, '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }, }, })

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.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Debugging in Templates

Guide to debug Vue component templates using the Browser DevTools.

Vue Tip: When to Use Render Function

When should I use a render function in Vue.js? We’re going to cover some advanced Vue.js patterns when you need to use render functions.