Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

feat(nuxt): server-only components #5688

Closed
wants to merge 9 commits into from
Closed

Conversation

danielroe
Copy link
Member

@danielroe danielroe commented Jul 1, 2022

πŸ”— Linked issue

❓ 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

Summary

This PR adds support for:

  1. rendering individual components through a special GET request to /__nuxt_render (implementing RFC https://github.com/nuxt/framework/discussions/666)
  2. registering and rendering server components with .server.vue suffix (implementing Server only componentsΒ nuxt#11856), including injecting scripts + styles from this render back into client-side DOM. As part of this, we only build CSS from server-components into client build (which is required), meaning the code from server-components won't be present in your client bundle.

CleanShot 2022-07-01 at 11 10 13

Next steps

  • The key next step is to review to see if we want to make any changes to RFC or spec.
  • Update documentation with details about server (+ client) components

Future improvement ideas

  1. 'Batching' server component updates
  2. Detect 'dependencies' of server components so entire state doesn't need to be pushed
  3. Detect 'effects' of server components so entire state doesn't need to be returned from renderer
  4. Move server-only component CSS out of manifest (but this can also be handled as part of solution to Nuxt 3 prefetch all assets from every pages and every layouts.Β nuxt#13778)

πŸ“ Checklist

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

@danielroe danielroe added enhancement New feature or request 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing labels Jul 1, 2022
@danielroe danielroe requested review from Atinux, pi0 and antfu July 1, 2022 10:20
@danielroe danielroe self-assigned this Jul 1, 2022
@netlify
Copy link

netlify bot commented Jul 1, 2022

βœ… Deploy Preview for nuxt3-docs canceled.

Name Link
πŸ”¨ Latest commit 345e9c4
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/62bed304f120080008b6c557

@pi0 pi0 marked this pull request as draft July 1, 2022 10:34
Copy link
Member

Atinux commented Oct 8, 2022

Happy to review when not in draft anymore (cannot wait BTW!)

Copy link
Member Author

πŸ‘ This is waiting for merge of #5689.

@cumhuronat
Copy link

Will this be included in rc14?

@danielroe
Copy link
Member Author

This is waiting on #5689.

@cumhuronat
Copy link

This is waiting on #5689.

not anymore :)

@Dante-dan

This comment was marked as duplicate.

@danielroe danielroe mentioned this pull request Jan 6, 2023
7 tasks
@danielroe danielroe deleted the feat/server-components branch January 9, 2023 11:29
@danielroe danielroe added the 3.x label Jan 19, 2023
@joezimjs
Copy link

So this is coming in 3.1? When should we expect to be able to start trying this out?

@danielroe
Copy link
Member Author

3.1 will be coming imminently. πŸ‘€

But you can always try things out in the edge channel, and in fact we really appreciate people testing the edge to catch regressions early.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x enhancement New feature or request 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Server only components
6 participants