perf(nuxt): tree-shake client-only components from ssr bundle

[danielroe]

🔗 Linked issue

similar, but for composables rather than templates: #5749

together, they resolve nuxt/nuxt#14192

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Vue will still render the slots/children of a client-only component, which often creates the non-intuitive situation that it's not enough to wrap a component that's incompatible with SSR (often a third-party component). Instead, it needs to be used only with in a ~/components/SomeWrapper.client.vue. But we can do better. This PR strips out any children from client-only components, rendering just the wrapper on SSR.

The one caveat is that because we are naively matching <template> with RegExp, this will break with nested versions of the same component, e.g. <ClientOnly><ClientOnly></ClientOnly></ClientOnly>. I think this is an edge case and it's probably enough to warn in the docs, but if we want to support it, I can rewrite to use a different matching method other than RegExp.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	aaad00c
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62d054f7cad1a30008bfef26

[pi0]

This is a nice to have enhancement but as we discussed and you also mentioned in the description, we have the new method of .client components which are explicitly declared to be in client-side bundle and are not included in server bundle. Adding this plugin, also has performance downside when not needed and probably edge cases.

Is there any case do you think we cannot offer to migrate from <ClientOnly> to .client/.server components?

[danielroe]

Even with .client components, there is still an enhancement to be made by tree shaking out their children, which would otherwise be rendered even if not in the produced HTML.

Moreover, it's not always compatible with best practices in component design. If we have to extract a separate .client component for each layout chunk, that has a negative and fragmentary impact on codebase.

I think it is better to have both options in the code base, for different purposes.

[pi0]

Fair point about tree-shaking children 👍 Then let's try it :)

Off topic: regarding .client vs Client-only, using wrapper beings fragmentation too since developer has to always remember adding wrapper and can easily forget to by mistake...