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
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.
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.
@Dawit I don't see any hydration issues in the console, do you know of methods to find out what goes wrong?
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
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.
Could be. Good luck 👍. Kindly close this discussion if you manage to solve your issue.