Getting hydration issue when using useState in different components

[schneider-carlo]

Environment

• Operating System: Darwin
• Node Version: v18.13.0
• Nuxt Version: 3.1.1
• Nitro Version: 2.1.1
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

1. git clone git@github.com:schneider-carlo/nuxt-3-use-state.git
2. cd nuxt-3-use-state
3. yarn install
4. yarn dev
5. open this url: http://localhost:3000?hello=world

Describe the bug

I want to read the current query information in the dynamic [...slug].vue page and store it to the useQueryState.ts composable. After that I want to output this stored information in the header.vue component. When I am doing this, I am getting a hydration issue (getting cumulative layout shift and console warning). Curiously when I output this information in the [...slug].vue page it works fine.

I really would like to know if this a bug or I am doing something wrong, because I faced this issue multiple times and don't know how to fix this.

Additional context

No response

Logs

No response

[Baroshem]

Hey, I am afraid that I do not understand whag the issue.

Could you please create a stackblitz reproduction with your issue so that it is easily testable?

I will look into it once it will be reproducable :)

[danielroe]

The issue here is that on the server, order matters. Components are rendered from the top down, and there is no reactivity. In this case you are setting the data in your page, but by this point it's too late. The header has already rendered. So on the client side we have a mismatch, because the data is present now for the header.

You should likely load the data in a middleware or in a nuxt plugin.

[dulnan]

I had the exact same problem. In the page component I load data from an API, which I then need in components that are rendered in the default layout. Loading this data in a plugin is not an option, because I have several pages with different data fetching logic. A good example are breadcrumbs: Only the page is aware of its breadcrumbs, because they‘re part of the data loaded from the API.

I came up with a solution that I described in this discussion:

#18451

In a nutshell: Wrap your components that require page data in a special wrapper component that returns a promise as a render function. This promise only resolves once the data is available. Once it resolves, the slot contents of the wrapper are rendered and they have access to the updated state.
One way to do that is to add an event listener for a special hook in the wrapper. You then manually call this hook in your page component after you‘ve loaded the data. When the hook is called the promise resolves and the wrapper component finishes rendering.

I have implemented this in one of my projects for a few days now and so far it seems to work as expected.

[schneider-carlo]

Thanks to all responses! I have a similar issue like @dulnan has. In a private project I was fetching the data from the current page like translated slugs and titles and make it available for all components. For example I wanted to build a language switcher component in the header component which uses the current translated slugs.

I found a solution which worked 99% for me. I built a composable which has my fetch functionality and the useState wrapped in a set and get function in it. I called the set function in the app.vue / default layout and also calling it in a watcher which looks for route changes. Then I call the get function in the language switcher component to get the current page information to have a reactive language switcher and in the [...slug].vue to render the current page information. This works fine for me. Now I have a new little issue.

In the [...slug].vue file I am using useHead to set the title of the page. There I am using the translated titles like this:

useHead({ title: story.value ? story.value.translated.names[locale.value] : '404 - Page not found!', })

The issue is that when a open the page the first page has the correct title (for example 'home'). But when a click another page like 'about-me' the title stays 'home'. Now the weird stuff begins. When I click on another page like 'contact' I have 'about-me' in my title. When I click on 'home' the title gets 'contact'. So the title is always the title of the last page except on the first page load.

When I render the variable, which has all the information in it, in the template, in a

{{ story.translated.names[locale] }}

for example, I always get the current information. I don't really know why this is happening and how I can fix it.