vitejs / vite-plugin-react

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

Injecting Preamble not possible when using `renderToPipeableStream`. #293

Closed C5H8NNaO4 closed 1 month ago

C5H8NNaO4 commented 4 months ago

Describe the bug

I am trying to use SSR with Vite and React.

I have to use renderToPipeableStream because I'm using code splitting and Suspense which is not compatible with renderToString.

It's not possible to use transformIndexHtml together with renderToPipeableStream.

How can I inject the preamble by other means or disable it?

Reproduction

https://github.com/C5H8NNaO4/vite-ssr-stream-repro

Steps to reproduce

git clone https://github.com/C5H8NNaO4/vite-ssr-stream-repro cd vite-ssr-stream-repro yarn yarn dev

System Info

Windows 11, Node v18

Used Package Manager

yarn

Logs

No response

Validations

hi-ogawa commented 1 month ago

FYI, create-vite-extra repo recently added streaming example:

This one still uses index.html to setup bootstrap scripts and it doesn't do React 19 style full document rendering though.

ArnaudBarre commented 1 month ago

Yeah I think this part does it well: https://github.com/bluwy/create-vite-extra/pull/54/files?w=1#diff-fec94eeb5a435041f70a99f5a079623b3be9d4be73d174a3648ded111dc0038aR68-R83

The other solution would be to have React render everything and have something like this in a part of the react tree in charge of the header: https://github.com/rakkasjs/rakkasjs/blob/ff95ee58ace4e262c320cc26884738ad0a74815c/packages/rakkasjs/src/features/pages/middleware.tsx#L750

For now I consider this concern outside of the scope of the plugin, but if you think anything in this plugin could make things more easy for streaming, please open an issue to discuss the need!