useHead causes flickering when hydrating SSR-rendered page on Nuxt about head HOT 8 CLOSED

Available in https://github.com/vueuse/head/releases/tag/v0.8.0, will be shipped to Nuxt in the next few days

from head.

I was able to workaround this by calling useHead in middleware. I was originally setting it in a layout file, so moving the call further up the execution stack works. Not sure why this matters, but hope it helps.

from head.

was able to workaround this by calling useHead in middleware. I was originally setting it in a layout file, so moving the call further up the execution stack works. Not sure why this matters, but hope it helps.

This most definitely helps! I moved my offending useHead declaration from app.vue to a plugin (note: using the vue:setup hook) and it works like a charm. Thanks for the tip!

from head.

@antfu Hey Anthony, any ideas on why this is happening and how to resolve it? Unfortunately nuxt/bridge#277 didn't address the issue.

from head.

Here's a possibly dumb idea:

What if we just debounced updateDOM()? This is what's happening:

1. Server populates the head with proper styles
2. Client begins hydrating
3. The first couple updateDOM() calls don't have everything yet
4. updateDOM() is called several times in a row, and by the last update, all head items are present

Does updateDOM() really need to set the head a bunch of times in a row? I made my own local patch and I'm debouncing updateDOM() by 500ms. This fixes the background color flash.

This feels pretty hacky to me, so I'm sure there's a better way.

from head.

Also running into the same issue using vueuse/head: 0.7.9 in nuxt: 3.0.0-rc.8.

from head.

The workaround doesn't work for me, unfortunately, since I don't have enough data in the middleware to actually populate the head.

from head.

Temporary workaround using a debounce function seems to solve it: #78 (comment), will need to investigate if there's something more elegant

from head.