Dealing with the flash of unstyled content (FOUC) problem

[lucperkins]

Do any of you have a preferred method for dealing with the flash of unstyled content problem in an îles site? I know that Vue has some mechanisms for dealing with it, like v-cloak, but that doesn't seem to be working in my case. I know this question is a bit open ended but would love to have some ideas to investigate!

[ElMassimo]

Hi Luc!

If you provide a specific example, I might be able to pinpoint what the problem might be in your scenario.

---

When using site generators like Hugo or Jekyll, any JS components would be rendered only after hydration, causing FOUC and layout shifts. îles allows you to avoid both problems.

With îles, Vue components are pre-rendered (leveraging Vue's SSR capabilities), so the HTML is available before JS kicks in.
Since Vite will extract styles and CSS is a blocking resource, the first render would already have the necessary styles and HTML.

As a result, in most cases (example) an îles site will look exactly the same even if JS is disabled.

[lucperkins]

@ElMassimo Hello! Here is the site in question: https://zero-to-nix.com. To be clear, I haven't been able to reproduce it and the issue was reported by someone else, so it could be a browser issue. The repo for the site is here in case you wanted to have a look. I don't think we're using îles in an exotic way so I'm not sure why the user might be encountering this.

[ElMassimo]

Looking at the site with JS disabled, I can see that the following banner is not in the initial HTML:

Since some users should see it and some shouldn't, what you could do is use v-show instead of v-if, ensuring the HTML is always there, and then inline some blocking JS to conditionally hide or show that by using display: none or block.

In cases like this, it might be preferable to drop from a nice abstraction like nanostores, and use localStorage directly instead, ensuring the inline script is very small and dependency-free, so that it doesn't block rendering time in a significant way.

For example, you could render the banner always, and have a very small inline-script that deletes that DOM node if the local storage key zero-to-nix:banner-1 is found.

In summary, avoiding FOUC in cases like this usually means going back to blocking script tags instead of the async script type="module".

[lucperkins]

@ElMassimo Sigh, actually it turns out that the issue was a Firefox extension that something was using. Once they disabled the extension the issue completely disappeared. So îles is 100% not at fault here. As always, excellent work 💯 But I appreciate your tips here very much. Indeed, probably best to cut down on bloat wherever possible.