This repo reproduces a bug where client-side navigation between two
routes with different match-chain preload counts causes every
route-managed <link rel="stylesheet"> to be removed from and re-added
to <head> — producing a Flash of Unstyled Content in production.
The bug only reproduces in a production build — not in vite dev.
- Install dependencies:
pnpm install
- Build the app for production (it doesn't reproduce with the dev server):
pnpm build
- Start the preview server:
pnpm preview
- Open the app (probably on
http://localhost:3000/) in a browser. - Open DevTools and the Network Inspector, and then check
Disable cacheand select theCSSfilter - Optional: Refresh with devtools open, and select the CSS request and throttle it to 3G speeds for a more dramatic effect (right click => Throttle requests => Throttle request URL)
- Click around between the links Home/A/B/C in the navigation.
- Notice that there's a FOUC between some navigations. If you look at the network inspector you should see that the css file reloads on those navigations.