Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR flickering in Vite Dev mode #1404

Open
chin2km opened this issue Apr 24, 2024 · 1 comment
Open

SSR flickering in Vite Dev mode #1404

chin2km opened this issue Apr 24, 2024 · 1 comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR

Comments

@chin2km
Copy link

chin2km commented Apr 24, 2024

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
Screenshot 2024-04-24 at 2 16 23 AM

goes to the below state after some time
Screenshot 2024-04-24 at 2 05 49 AM

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
@chin2km chin2km added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels Apr 24, 2024
@github-actions github-actions bot added platform: ssr 🛠️ Issue related to SSR and removed needs: triage 🏷 Issue needs to be checked and prioritized labels Apr 24, 2024
@chin2km
Copy link
Author

chin2km commented Apr 24, 2024

Also created an issue https://github.com/Anber/wyw-in-js repo since I was not sure where this should be solved.
Anber/wyw-in-js#78

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR
Projects
None yet
Development

No branches or pull requests

1 participant