nuxt
useHead causes flicker when hydrating SSR-rendered page
Environment
- Operating System:
Linux - Node Version:
v16.14.0 - Nuxt Version:
3.0.0-rc.4 - Package Manager:
[email protected] - Builder:
vite - User Config:
modules,css - Runtime Modules:
@nuxtjs/[email protected] - 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.
Additional context
No response
Logs
No response
I have the same issue, currently using Nuxt 3.0.0-rc.5, in my case I'm using the useHead composable to set htmlAttrs as following
<script setup lang='ts'>
const styles = computed(() => {
return '--bg-color: black; --accent-color: red;'
})
useHead({
htmlAttrs: {
style: styles,
},
})
</script>
I've got the same issue, running 3.0.0-rc.5. I'm using useHead() to set CSS custom vars once the data has been fetched (server-side):
useHead({
style: [
{
type: 'text/css',
children: `
:root {
--background: ${theme.background};
--background-contrast: ${bgContrastColor.value.toHex8String()};
--faded-overlay: ${fadedOverlay};
--text: ${theme.text};
--link: ${theme.link};
--primary: ${theme.primary};
--primary-faded: ${primaryFadedColor.toHex8String()};
}
`,
},
],
});
The color is correct upon page load (immediately), as it seems this is coming from the server side. But once hydration begins, the page goes white (transparent), and once hydration completes, the color is correct again.
However, frustratingly, I can't reproduce this in StackBlitz.
Here's a video of Chrome watching the background styles and the custom CSS var itself, going starting from the page load (where the vars are not available). Notice how the CSS custom var is lost during hydration.
https://user-images.githubusercontent.com/12532733/179637988-0f43cc8b-1cbd-4a03-88a3-5d436e5e95f5.mp4
@makkarpov Has this been an issue for you lately? The bug seems to have just gone away on my end. (knock on wood)