vite-plugin-react icon indicating copy to clipboard operation
vite-plugin-react copied to clipboard

Injecting Preamble not possible when using `renderToPipeableStream`.

Open C5H8NNaO4 opened this issue 11 months ago • 1 comments

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

C5H8NNaO4 avatar Mar 01 '24 23:03 C5H8NNaO4

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.

hi-ogawa avatar May 13 '24 23:05 hi-ogawa

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!

ArnaudBarre avatar May 21 '24 09:05 ArnaudBarre