vite-plugin-react
vite-plugin-react copied to clipboard
Injecting Preamble not possible when using `renderToPipeableStream`.
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
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
FYI, create-vite-extra repo recently added streaming example:
- https://github.com/bluwy/create-vite-extra/pull/54/
This one still uses index.html
to setup bootstrap scripts and it doesn't do React 19 style full document rendering though.
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!