Use renderToPipeableStream instead of renderToString in ssr-react playground

[raphael-arce]

Description

The playground ssr-react uses in the entry-server.jsx the method ReactDOMServer.renderToString which does not support streaming or lazy / suspense components. I'd suggest to replace it with ReactDOMServer.renderToPipeableStream.

Suggested solution

I have made a working example based on the playground (a tiny bit more complex, but in essence the same) here:

https://github.com/technologiestiftung/vite-react-ssg-example/blob/feat/add-streaming-for-suspense/src/entry-server.tsx

If desired, I can make a PR to add these changes. As far as I can tell, nothing else would need to be changed.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

The playground is mostly for testing of vite plugin, so it's not necessary a goal to showcase React features. We would ideally only need to test where React requires bundler specific integration.

Also, streaming SSR example currently exists on create-vite-extra https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming.

Another concern is that how to setup streaming ssr to create your own react framework on Vite can be quite opinionated (for example, there is an issue like #352 (comment)), so it's not too obvious what pattern we should test here.

Having said that, I think it would be still nice if we can test it or at least discuss it here, so thanks for raising an issue.

[raphael-arce]

I understand. For context: my initial goal was not to use it for SSR, but to prerender all pages as static html files, and also have better code splitting via lazy/suspense components.

I saw the example of create-vite-extra, but prefered to use the example ssr-react in the playground, as it had already a prerendering script ready to use. After trying it out in combination with lazy/suspense components I got an error, that it is not supported by renderToString and that renderToPipeableStream needs to be used instead.