devtools icon indicating copy to clipboard operation
devtools copied to clipboard

A way to work on server components as normal components only during development

Open TechAkayy opened this issue 2 years ago • 0 comments

Describe the feature

Server components are rendered only on the server, and the associated javascript is not shipped to the client (unless it has dynamic children), thereby is no hydration on the client.

The Problem

This means there is an impact to how we can test behaviour by updating props of server components in vue-devtools. Other impacts include ability to use the component inspector in nuxt-devtools and the similar feature in vue-devtools to identify child components within server components.

image

Proposed solution:

One way to make sure any current devtools experience is not compromised is to have a way (through some nuxt config flag) to serve the server-components as normal components during development.

https://github.com/ElMassimo/iles/discussions/47 Iles does something similar, where Iles apps are single-page-applications during development, so that developers get the best developer experience, and when building for production, outputs a SSG (mpa flavour similar to Astro). Even though they are quite similar, this is a significant difference between Iles & Astro when using Vue islands.

Nuxt could adopt a similar approach. One drawback of this approach is the obvious difference between development & production, so making this opt-in for the users will help with that.

Additional information

  • [ ] Would you be willing to help implement this feature?
  • [ ] Could this feature be implemented as a module?

Final checks

TechAkayy avatar Oct 26 '23 07:10 TechAkayy