Support React Server Components

[gaearon]

Discussion moved to #9089

[slorber]

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?

[gaearon]

What's the bundler? Webpack? The most "vanilla" example we have is here. https://github.com/facebook/react/tree/main/fixtures/flight

[slorber]

Thanks, didn't know about this example 😄
Yes we are on Webpack 5
We'll try to adopt RSC after docusaurus v3 once we are on React 18

[slorber]

Created an issue so that github backlinking works better: #9089