White flash on page reload

Hi, when reloading a page, I get a white flash. This is happening since a recent update (or change in my code), it was not there before. How can I pinpoint the cause of this? A reproduction in production can be found here: https://hetbrugrestaurant.nl/
Het Brugrestaurant - online bestellen | Officiële website
Ontdek de lekkerste burgers van de stad op de brug van de woonboulevard Oldenzaal.
6 Replies
plechelmus
plechelmus4w ago
I found another thread with a similar problem suggesting disabling third party scripts, however I only have Sentry and Plausible and if I disable both the issue still persists. Was missing "ssr" in the nuxt.config, going to check now if that fixes is. I assumed SSR was enabled by default Did not work. I have another app with basically the same dependencies and settings and code and it does not have the same issue.
Dawit
Dawit4w ago
I have encountered the issue once. In my case, it was because I had an invalid html structure. Like placing a heading tag inside a div. There may be other causes too and it typically has to do with mismatches between what the client renders and the server renders.
plechelmus
plechelmus3w ago
@Dawit I don't see any hydration issues in the console, do you know of methods to find out what goes wrong?
plechelmus
plechelmus3w ago
I have removed all stylesheets, plugins, components, stores, etc. from the project, the nuxt config is basically empty and I added one piece of text and an image to the index.vue page, but it still gives the same issue, I see it flicker to white after a reload
No description
plechelmus
plechelmus3w ago
The weird thing is, this is a "storefront" of which there are currently 3 in the project. They are basically copies, with some tweaks in styling. But all basic logic is the same. Only this one is giving problems. Maybe its a dependency issue from my PNPM monorepo. Going to try and isolate it now With all dependencies removed and the project isolated the issue is gone. Going to backtrack now where the issue is. It appears it was simply a version mismatch, probably one of the packages was using vue 3.5.11 and the other 3.5.12 or something like that.
Dawit
Dawit3w ago
Could be. Good luck 👍. Kindly close this discussion if you manage to solve your issue.
Want results from more Discord servers?
Add your server