callstack
SSR flickering in Vite Dev mode
Description
In Vite Dev mode for react server-side rendered application the critical CSS needed for styling the application only loads after a while after the vite runtime is loaded and the application is finished hydration.
This results in very bad flickering of UI in big applications since time to load the Vite runtime and hydration can take few seconds.
This is only an issue in dev mode of the plugin, in production mode it works perfectly where it extracts the css to a file and is inlined in the out html.
Reproducible Demo
https://github.com/chin2km/linaria-vite-dev-ssr-issue
goes to the below state after some time
Environment
Node: 20 Bundler: Vite 5 Linaria Version: 6.1.0 OS: macOS
Expectation
The linaria styles are extracted to css file and is either:
- inlined in html with a html transformation
- the css is extracted and written to a file during dev so that it can extracted and injected as critical css during react ssr
Also created an issue https://github.com/Anber/wyw-in-js repo since I was not sure where this should be solved. https://github.com/Anber/wyw-in-js/issues/78