Component styles are not inlined to the page

Context: With Nuxt 2, bundled components in the server had matching styles that could make it possible to inline <style> tags to the HTML response of the server for faster content paint.

In Nuxt 3 and using vite, the server bundle has no information about styles but only matching chunk ids. Therefore best we could do is to add <link rel="preload" as="style"... to trigger browser prefetching styles but this is not best for performance because the network request is cascaded:

With Nuxt 2, with (opt-in) css-extraction, we could enable HTTP 2/Push as an alternative but well… It is dead

Another alternative is that we could somehow integrate bundle-renderer (or use a nitro render:html hook) to fetch styles (off the client public/ assets) and inline them on the fly.

Another limitation is with Component Islands (https://github.com/nuxt/framework/pull/5689) that are essentially server-side components. In order to allow components having style, we have to use a hack to use a plugin (like this) that extract styles/imports and build them to the client bundle and use prefetch links.

Ideal solution, is to make vite server build containing styles in the bundle and able to directly render them.

---

Remarks: Webpack 5 builder with Nuxt 3 seems actually has this information in server bundle (but we don’t use it)

[danielroe]

In this implementation, we inline the styles required for the first render, but subsequent navigations access CSS in separated .css files that can be cached.

[pi0]

Hi dear @516310460. This issue is not dedicated to the component islands feature. Initial support of component islands in Nuxt (#5689) is static server (with props-based interactivity). In the future we plan to introduce more variants of (client) interactive islands.