Support React Server Components

[slorber]

Discussed in #8758

^{Originally posted by gaearon March 10, 2023}

---

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:

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]

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:

• Static code block highlighting => use https://bright.codehike.org/ or something else but do not include Prism in frontend bundle (like Nextra does with Shiki)
• Mermaid diagram component (unfortunately only works in the browser for now)
• Runtime Markdown code blocks (like Docusaurus v1 used to have: https://v1.docusaurus.io/docs/en/api-pages#complibrarymarkdownblock)

Some related tweets:

• https://twitter.com/sebastienlorber/status/1598615824927002624
• https://twitter.com/sebastienlorber/status/1584795572577644546

---

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?

[thedevwonder]

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]

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]

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.