Rendering Modes In Nuxt

Hi 👋

I have a lot of exciting content to share with you today, including a valuable Nuxt tip about rendering modes. Additionally, I've curated a selection of top-notch Vue content that I think you'll find helpful in your web development journey.

In addition to that, I also have a roundup of the latest web development news and tools, to keep you up-to-date with the latest trends in the industry.

I appreciate your support and hope you find this issue informative and helpful.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

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.

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.

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.

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 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.

Until next week,