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

feat: prevent FOUC with SSR in dev #5

Merged
merged 8 commits into from
Mar 3, 2024
Merged

Conversation

Julien-R44
Copy link
Member

this PR fix the FOUC that happens when you're in dev mode and using SSR

implementation is quite simple. Vite maintains a graph module that lets you know the relationships between different files. this graph module lets us know which file imports which other file. so, from a file URL, we can browse the graph to find out which CSS files have been imported. here are the different steps :

  • first, retrieve the client-side entry point (usually /resources/app.ts ) via Vite's graph module.
  • from this entry point, we also retrieve the component of the page that will be rendered
  • we now have both modules, the entrypoint and the page.
  • for these two modules, we recursively browse the module graph to find all of their CSS imports
  • we now have the list of CSS that will be imported. We generate <link> tags that we inject into the head of the page rendered in SSR.

no more FOUC as CSS is loaded immediately before JS !

@Julien-R44 Julien-R44 marked this pull request as ready for review March 3, 2024 16:15
@Julien-R44 Julien-R44 merged commit 189570c into main Mar 3, 2024
12 checks passed
@Julien-R44 Julien-R44 deleted the feat/css-preloading-dev branch March 3, 2024 16:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant