Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useHead causes flickering when hydrating SSR-rendered page on Nuxt

See original GitHub issue

Original issue is https://github.com/nuxt/framework/issues/5735

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>

https://user-images.githubusercontent.com/1329592/177387658-5884e692-6dde-455a-ab0a-34bdefca962f.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.

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:8

Top GitHub Comments

3reactions

harlan-zwcommented, Oct 1, 2022

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

2reactions

atoddcommented, Sep 13, 2022

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.

Top Results From Across the Web

useHead causes flicker when hydrating SSR-rendered page

SSR correctly generates classes on body, then on hydration they are removed and then added again, resulting in a very noticeable flicker, ...

Server Side Rendering - Nuxt

The browser receives the rendered page from the server with the generated HTML. The content is displayed and the Vue.js hydration kicks in,...

Flickering content when trying to show non-authenticated and ...

This is why you see the "flickering" and I'm afraid there is no easy solution to this problem when your site if fully...

The head from vueuse - GithubHelp

import { useHead as originalUseHead, HeadObject } from '@vueuse/head' export const ... useHead causes flickering when hydrating SSR-rendered page on Nuxt.