Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #85 - Rendering Modes In Nuxt #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #85

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:

Nuxt Tip: Rendering Modes

Nuxt 3 offers three different rendering modes:

  • Client-side rendering
  • Universal rendering
  • Hybrid rendering

Client-Side 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

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:

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 },

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.

Curated Vue ContentπŸ“• What is ref() in Vue?
πŸ‘‰πŸ» Dmitri explains waht ref() is in Vue.
πŸ‘‰πŸ» Knowing refs is a requirement if you want to understand reactivity in Vue.
πŸ“• Pages vs. Layouts vs. Components
πŸ‘‰πŸ» In our Nuxt apps we have three main ways to get content rendered: Pages, layouts, and components.
πŸ‘‰πŸ» Michael Thiessen answers the big question: which one should we use, and when?
πŸ“• How To Use Feature Flags in Vue

πŸ‘‰πŸ» David explains how to implement feature flags in your Vue application using ConfigCat’s feature flagging service.
πŸ“Ή Patterns for Large Scale Vue Applications

πŸ‘‰πŸ» In this talk Daniel Kelly, discusses practical design patterns for making your large-scale Vue projects more predictable.
Quote of the weekCurated Web Development ContentπŸ“• Announcing TypeScript 5.0
πŸ‘‰πŸ» 5.0 is not a disruptive release
πŸ‘‰πŸ» New decorators standard
πŸ‘‰πŸ» Better support ESM projects in Node and bundlers
πŸ‘‰πŸ» New ways for library authors to control generic inference
πŸ‘‰πŸ» and more...
πŸ“• Let's build a Chrome extension that steals everything

πŸ‘‰πŸ» Matt demonstrates that in spite of Manifest v3, a whole lot of bad stuff is still possible when it comes to building browser extensions.
πŸ“• Serverless scales well, but most databases don’t

πŸ‘‰πŸ» The benefits that come from serverless computing can be lost if you have to spend your time provisioning hardware for your database.
πŸ› οΈ
πŸ‘‰πŸ» Palette Generator and API for Tailwind CSS.
πŸ‘‰πŸ» The motivation for this tool is to avoid Tailwind’s built-in color tools that tend to make every project look the same.
πŸ› οΈ Remult
πŸ‘‰πŸ» A CRUD framework for fullstack TypeScript.
πŸ‘‰πŸ» Promises a β€˜zero-boilerplate’ CRUD API experience by using your TypeScript entities as a single source of truth for your API, frontend type-safe API client and backend ORM.
πŸ› οΈ TypeTrials

πŸ‘‰πŸ» A free platform to test and experiment with variable fonts.
πŸ› οΈ DummyJSON

πŸ‘‰πŸ» Get dummy/fake JSON data to use as placeholder in development or in prototype testing.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.