Integrate SSR

[sviridoff]

Hello! Firstly, thank you for your effort. I found your explanation on how to integrate RSC into a common project very helpful in understanding the process better. Currently, I am working on an example which is fairly simple, but I am trying to figure out how to combine RSC with SSR. You can see the demo here: https://github.com/sviridoff/rsc-webpack-swc-fastify-demo. I have replicated the RSC result hardcoded in the HTML file here: https://github.com/sviridoff/rsc-webpack-swc-fastify-demo/blob/main/public/page.html#L12. However, when I try to hydrate it (https://github.com/sviridoff/rsc-webpack-swc-fastify-demo/blob/main/src/bootstrap.tsx#L16), it throws an error because it does not match the result. I'm not sure if the strategy I am attempting is correct, as I haven't found any examples to follow. Do you have any suggestions on a better strategy to hydrate an HTML with the result of the RSC? Thank you.

[bholmesdev]

Hey @sviridoff! This is an excellent question, and it's the one piece I struggled to pull off in my minimal example here. Crawling the React Flight test fixture in React Core, I found this solution. This creates a stream, immediately reads that stream server-side, and sends the SSR result to the client. I assume you'd need to create a second stream for the client-side piece since this stream will be exhausted, though that feels inefficient to me. I'll defer to @gaearon in case he has insight here.

[gaearon]

I think the problem with our example is that we don't inline the the RSC payload, so it does another fetch on the client again. Something like this seems like a better approach: https://github.com/unstubbable/mfng/blob/941ab3064f6d158bc5ab3144a6869476b16f0c39/packages/core/src/server/create-html-stream.tsx#L36-L38