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!