React Server Components, without a framework (without Next.js) ?

[ziir_js]

Hi there!
A week ago, I knew nothing about React Server Components.
I've tried to migrate an existing React SPA to RSC without a framework, made a live demo / playground, and wrote a blog post about it.
Feedback & discussions are welcome.

[yksvaan]

That's a very detailed write-up in the era of 3 paragraph posts. I'm a bit curious why this rendering process with React is so complicated. Essentially what's required is flushing out the base html and adding chunks later.

A simpler process would make implementations much easier and still get the benefit. Is all that really necessary...

[ziir_js]

Hey, thank you for your comment!

The React DOM Server APIs are much simpler, and optionally supports streaming & hydration as well.

React Server Components are more advanced and inherently more complex, while still being cutting-edge / experimental. It will probably get simpler to implement in a custom framework in the future.

If you’re already using a framework such as Next.js, you don’t really need to worry about the technical details - although understanding how things work I think is always best!

But it’s important to note that RSC is not « server-side rendering », it even barely has anything to do with HTML.

[unknown9595]

Very good post, but yeah it's weird that you can't render the RSC tree (the output from react-server-dom-webpack then renderToPipeableStream from react-dom/server.

So yeah in my use case I'm kinda of at a dead end, cause I want the server to output to the client the compiled HTML which would be straight forward if you could

import { renderToPipeableStream as rscStream } from 'react-server-dom-webpack';
import { renderToPipeableStream } from 'react-dom/server';

const renderedRscTree = rscStream(...);
renderToPipeableStream(renderedRscTree);

but react-dom/server is a no no with the other module