search

vitejs / vite-plugin-react

The all-in-one Vite plugin for React projects.
MIT License
601 stars 113 forks source link

Use `renderToPipeableStream` instead of `renderToString` in `ssr-react` playground #359

Open raphael-arce opened 2 months ago

raphael-arce commented 2 months ago

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

hi-ogawa commented 2 months ago

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 https://github.com/vitejs/vite-plugin-react/pull/352#issuecomment-2246741265), 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 commented 2 months ago

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.