search

bluwy / create-vite-extra

Extra Vite templates
MIT License
370 stars 55 forks source link

Style flickering during SSR in development mode in template-ssr-react-streaming-ts template. #55

Closed korbinzhao closed 1 month ago

korbinzhao commented 1 month ago

When using the template-ssr-react-streaming-ts, I encountered an issue where the page styles flicker in development mode due to SSR content being rendered before the style files. How should this be resolved?

iShot_2024-07-18_10 12 46

bluwy commented 1 month ago

This is expected with Vite's CSS handling (even in an SPA setup), as modules are loaded lazily and CSS may be loaded after. Many metaframeworks are able to mitigate this though by crawling the entrypoint (in this case entry-server.tsx) and detect all the CSS, and then inline them into the initial HTML. There's more information at https://github.com/vitejs/vite/issues/16515.

While the template could add some code to prevent the FOUC, I prefer to keep it as minimal as possible as a start. Perhaps when Vite can expose an API to make the crawling simpler, the template could use it to prevent this issue.