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:
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 withssr: false
cors
- Automatically adds cors headers withcors: true
- you can customize the output by overriding with headersheaders
- Add specific headers to sections of your site - for example, your assetsstatic
- Enables a single (on-demand) buildswr
- 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.