search

facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
56.89k stars 8.56k forks source link

Support React Server Components #9089

Open slorber opened 1 year ago

slorber commented 1 year ago

Discussed in https://github.com/facebook/docusaurus/discussions/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](https://docusaurus.io/docs/creating-pages) as RSC. - Support for treating [MDX](https://docusaurus.io/docs/markdown-features/react) as RSC by default. - Porting the core of the site to RSC. [This](https://www.mux.com/blog/the-building-blocks-of-great-docs) 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 commented 1 year ago

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 (https://github.com/facebook/docusaurus/pull/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?

thedevwonder commented 1 year ago

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 commented 1 month ago

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 commented 1 month ago

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 (https://github.com/facebook/docusaurus/pull/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.