useHead causes flickering when hydrating SSR-rendered page on Nuxt

[makkarpov]

Original issue is nuxt/nuxt#14271

Environment

• Operating System: Linux
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.4
• Package Manager: npm@8.3.1
• Builder: vite
• User Config: modules, css
• Runtime Modules: @nuxtjs/tailwindcss@5.1.3
• Build Modules: -

Reproduction

Use useHead to assign some CSS classes to body, and then visit the page:

<script setup lang="ts">
useHead({
  bodyAttrs: {
    class: 'accent-yellow dark-zinc dark'
  }
});
</script>

useHead-flicker.mp4

Describe the bug

SSR correctly generates classes on body, then on hydration they are removed and then added again, resulting in a very noticeable flicker, especially when these classes are used to switch between dark and light styles of whole page.

[ffxsam]

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

[ffxsam]

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.

[atodd]

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

[atodd]

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.

[tylerforesthauser]

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!

[ffxsam]

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

[harlan-zw]

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

[harlan-zw]

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