Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support React Server Components #9089

Open
slorber opened this issue Jun 21, 2023 Discussed in #8758 · 4 comments
Open

Support React Server Components #9089

slorber opened this issue Jun 21, 2023 Discussed in #8758 · 4 comments
Labels
proposal This issue is a proposal, usually non-trivial change

Comments

@slorber
Copy link
Collaborator

slorber commented Jun 21, 2023

Discussed in #8758

Originally posted by gaearon March 10, 2023

CleanShot 2023-06-21 at 19 58 36@2x

I'd like to start a discussion on what it would take to get full RSC support in Docusaurus.

I imagine there could be different "layers" where support could be added, probably independent from each other:

  • Support for writing Pages as RSC.
  • Support for treating MDX as RSC by default.
  • Porting the core of the site to RSC.

This isn't super scientific but gives some anecdotal evidence that it's worth at least experimenting with:

Screenshot 2023-03-10 at 18 01 08

It also seems like a more scoped project than adopting RSC in a framework because Docusaurus is already constrained (always static output, no complex layouts).

Would love to hear your thoughts (and also happy to answer any integration questions).

@slorber
Copy link
Collaborator Author

slorber commented Jun 21, 2023

My initial answer:


Hey 👋

Actually, I've been thinking about this a lot and definitely want to add RSC support in Docusaurus for various reasons.

One of them is of course to reduce the bundle size, hydration time (particularly on long MDX content that's often quite static) and improve Lighthouse/CWV metrics.

There are also opportunities to use RSC to use more convenient tooling to interleave heavy runtime libs without paying the cost in the bundle. I'm thinking of:

Some related tweets:


What I'm most excited about is the flexibility it allows for Docusaurus Server/Static Components to query a data lake. We currently don't have a data layer like Gatsby, so the blog data is kind of only available on the /blog/* routes. With RSC we could query a big object DB and easily inject things like the 3 latest blog posts on your landing page.

Somehow it would allow the same as GraphQL for Gatsby, but we'd only use TypeScript instead and just pick the data we want for each page through the Server Components.


Today I'm still in the process of upgrading to MDX 2 (#8288) and will upgrade to React 18 just after 😅 Also apart from looking at Next.js I'm not sure yet how to integrate RSCs in Docusaurus, is there any example of vanilla RSC integration out there?

@Josh-Cena Josh-Cena added the proposal This issue is a proposal, usually non-trivial change label Jun 22, 2023
@thedevwonder
Copy link
Contributor

This looks like a good thing for experimentation. I don't have much experience on server-side react but would definitely like to try it out!

@usulpro
Copy link

usulpro commented Oct 2, 2024

Hey there! RSC seems like a solid way to boost performance. It’d be awesome to have this available for both pages and custom plugins. Could you share an update on where things stand with this feature now?

@slorber
Copy link
Collaborator Author

slorber commented Oct 2, 2024

Hey there! RSC seems like a solid way to boost performance. It’d be awesome to have this available for both pages and custom plugins. Could you share an update on where things stand with this feature now?

@usulpro the work on RSC hasn't started yet.

But we are in the process of migrating to Rspack (#10402) and made good progress on that, it should be released as experimental in v3.6 as a replacement for Webpack building 3x faster.

Adopting Rspack is an important step because adopting RSCs under Webpack might also slow down the build, which was already quite slow. Rspack (and other modern module bundlers) now have the ability to build the same app in multiple variants (Node, Client, RSC...) in a single pass instead of using Webpack MultiCompiler:

https://rspack.dev/blog/announcing-1-0#react-server-components-support

So, the first step is successfully adopting Rspack. Then we'll work on RSC support. But it's likely to take some time and require significant refactor of how our theme is organized. Some of our theme components will have to become RSCs for example, while others will use "use client". Most likely we'll refactor this progressively and start by adding "use client" everywhere to release RSC support sooner.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
proposal This issue is a proposal, usually non-trivial change
Projects
None yet
Development

No branches or pull requests

4 participants