Rendering Optimizations: Today and Tomorrow

[pi0]

This report is written by @nuxt/framework team for an overview of the Nuxt 3 rendering performance status and roadmap and will be updated as we progress. Feedback is more than welcome 💚

Related:

• Nuxt Image: Performance and Status: Nuxt Image: Performance and Status image#563

Why

Website performance plays a major role in the success of any online venture. High-performing sites engage and retain users better than low-performing ones.

As a site begins to load, there's a period of time where users wait for content to appear. Until this happens, there's no user experience to speak of. This lack of experience is fleeting on fast connections. On slower connections, however, users are forced to wait. Users may experience more problems as page resources slowly trickle in.

Universal rendering tends to solve this issue by rendering on the server the HTML so the user does not have to wait for the JS to be loaded to start reading or even interacting with the website content.

Server-side optimizations

Using server-side-rendering, Nuxt is able to optimize the resource delivery by:

• Prerender HTML content for first page views
• Preloading critical JS & CSS to improve the loading speed
• Inject the CSS in the header to avoid any FOUC (Flash of unstyled content)

Server-only components

We keep pushing forward to make sure Nuxt will deliver the best rendering performance. One of these solutions is server components and selective rendering in order to remove client-side JS for components that do not need hydration on the client-side.

• feat(nuxt): server-only components framework#5688
• feat(nuxt): experimental server component islands  framework#5689

Hybrid caching strategies

Rendering on the server-side is costly and there are different strategies to reduce this cost such as static pre-rendering (nuxt generate) and caching headers. With Nuxt 3 we are moving it further to allow setting a combination of this strategy to one website.

• RFC: https://github.com/nuxt/framework/discussions/3181

Client-side optimizations

In order for the website to be interactive, client-side assets need to be loaded. Using a bundler (Vite and Webpack), Nuxt is able to optimize client assets and resources.

• Split the JS & CSS per page to load the strict minimum
• Minify the JS & CSS to reduce network payload
• Optimize third-party JS & Fonts (link issue)
• Prefetch resources to speed up future navigations (feat(nuxt): support prefetching <nuxt-link> framework#4329)

Third-party script optimizations

Around 45% of requests from websites served on mobile and desktop are third-party requests, of which 33% are scripts. The size, latency, and loading of third-party scripts can significantly affect a site's performance.

The goal is to provide an API to create scripts with backed-in best practices and defaults to help Nuxt developers include third-party scripts in their applications with the best performance.

So far, we have provided a solution by leveraging Partytown to run third-party scripts from a web worker. Optimizing your third-party script is as simple as using the partytown-module.

<Script> component

Nuxt 3 has a built-in <Script> component.

Upcoming enhancements:

• Add strategy support (https://github.com/nuxt/framework/discussions/2342)
• Framework agnostic head utils: This allows the Scripts module to inject scripts in parallel to the main SSR/Hydration lifecycle and implement loading strategies.
• Provider preset integrations with nuxt/scripts

Scripts module

With an upcoming @nuxt/scripts module, Nuxt provides presets for 3rd party script integrations (such as gtm, crisp, etc.) in a managed way and optimizes integration when possible using lazy script initialization async operations. This project saves time by maintaining each integration as a separate module and ensuring users keep doing best practices out of the box.

Goals:

• 3rd party script presets
• Utilities for integration with routing system (analytics/page-tracking)
• Emitting events + stack picked up by the lazy-loaded script
• All injections on runtime but directly to the head by default
• Cookie handling - permissions (e.g., only load script if the condition is met) - e.g., GDPR, DNT
• Performance optimization strategies, like onNuxtReady, partytown, etc.
• Server-side handling
• Debugging

We are still discussing the usage internally for providing a good developer experience; we will update this issue as soon as we are open to feedback.

[XiNiHa]

How about streaming SSR of universal async components? Are they planned, or included in the whole server components plan?

[pi0]

Streaming is in the roadmap. We probably start supporting them after introducing Server component Islands (and few tweaks in nitro to make it possible)

[gangsthub]

I don't know if this is something already planned in Server Components or Hybrid Rendering features, but another common technique nowadays in Nuxt is using LazyHydrate (nuxt-lazy-hydrate package). Pretty much like Astro's directives.

• Would it make sense to include these features as part of the framework?
• Is the best option if you want to approach to zero/less JS, or are there other plans to enable zero JS in any of Nuxt modes?

Thanks in advance!

[kissu]

There will probably be quite some flexibility on what the team have planned IMO. Especially since Markus' package is not the most battle-tested + flexible approach. Was more of a quick try than a really long term solution.

Also, when it comes down to hydration there is a lot of granularity as how you handle all of this (Astro being great but more can be achieved).

[gangsthub]

That's great to know! Thanks, @kissu

[HummingMind]

Is there any ETA on testing the Server Components and/or partial hydration functionality @kissu mentioned in August?
Exciting stuff. Just trying to get a feel for the timeline. :)

Thank you!

[hacknug]

I think those features might be out already on the edge release. @harlan-zw 's nuxt-og-image seems to be using it as mentioned on the project's own docs: https://github.com/harlan-zw/nuxt-og-image#requirements

[harlan-zw]

Yup, I'm using them in a somewhat unconventional way. Look at the demos in the nuxt/framework for the best examples of usage.

Daniel has mentioned the API may likely change just keep in mind

[HummingMind]

Thank you! 🍺