Hydration node mismatch when using layouts

[gaisinskii]

Hey everyone!

I have run into a problem when using layouts instead of app.vue.

I have a TheHeader component that is connected to pinia, this component is used in my default layout. Then, in my page I fetch some data and pass it to pinia. When i navigate to this page everything is OK, but when I hit refresh (F5) I get this error:

[Vue warn]: Hydration node mismatch:
- Client vnode: p 
- Server rendered DOM: <!--]-->  
  at <TheHeader> 
  at <WillNotWork > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

I have created a reproduction repo that highlights my problem - https://github.com/andynoir/nuxt3-fetching-question

In the repo you will find a will-not-work layout + page and will-work layout and page.

In will-not-work layout you will find TheHeader component that is connected to pinia, in will-work layout there is no such component, I have moved it to the page.

The will-work page works fine even when refreshing (F5) the page, but will-not-work page throws a missmatch error, because TheHeader component in in the layout.

Has anyone experienced same problem ?

Best regards,
Andy

[danielroe]

This is a common SSR gotcha. The issue is that on SSR, Vue renders the HTML from top to bottom, outside to inside. And if you only fetch some data as you are rendering the 'inner' part of the page, it doesn't rerender the layout at the top of the page. (On client-side it's fine as can be reactive.) So if you have a common piece you rely on for rendering your page, make sure to fetch it in the layout, a plugin, or a middleware - somewhere outside of the rendering process.

https://github.com/nuxt/framework/issues/5669#issuecomment-1173538894

[danielroe]

This is a common SSR gotcha. The issue is that on SSR, Vue renders the HTML from top to bottom, outside to inside. And if you only fetch some data as you are rendering the 'inner' part of the page, it doesn't rerender the layout at the top of the page. (On client-side it's fine as can be reactive.) So if you have a common piece you rely on for rendering your page, make sure to fetch it in the layout, a plugin, or a middleware - somewhere outside of the rendering process.

https://github.com/nuxt/framework/issues/5669#issuecomment-1173538894

[gaisinskii]

This is a common SSR gotcha. The issue is that on SSR, Vue renders the HTML from top to bottom, outside to inside. And if you only fetch some data as you are rendering the 'inner' part of the page, it doesn't rerender the layout at the top of the page. (On client-side it's fine as can be reactive.) So if you have a common piece you rely on for rendering your page, make sure to fetch it in the layout, a plugin, or a middleware - somewhere outside of the rendering process.

#5669 (comment)

Thanks for the quick reply! At the moment I am rewriting my existing project from Nuxt2 to Nuxt3 and I haven't experienced such a problem in Nuxt2.

Regarding your words:

So if you have a common piece you rely on for rendering your page, make sure to fetch it in the layout, a plugin, or a middleware - somewhere outside of the rendering process.

Thats not ideal, because the data in my header is dynamic and might change quite often.

[danielroe]

Nuxt 2 had more limitations on when data could be fetched that generally prevented this kind of issue, but it would also have been possible to encounter this.

Thats not ideal, because the data in my header is dynamic and might change quite often.

None of the options I suggested means the data can't be reactive.

[gaisinskii]

Nuxt 2 had more limitations on when data could be fetched that generally prevented this kind of issue, but it would also have been possible to encounter this.

Thats not ideal, because the data in my header is dynamic and might change quite often.

None of the options I suggested means the data can't be reactive.

I am speechless... Either we have some miscommunications or I am just dumb xD

I just don't get it. My nuxt3 app kicks in, it looks at the layout and sees that there is TheHeader component in it that relies on pinia state, the state is simple - it is just and array so there is nothing to render, the header should be empty. Then my page kicks in and fetches some data and passes it to the state. And now additional nodes in the header should be rendered, right ? Where is the gotcha ?

I don't know if it will help, but when i discovered this error while rewriting my nuxt2 app, on client i had more nodes than on the server. And it felt like Nuxt was hydrating or fetching data multiple times.

Thanks for your time anyways, much appreciated.

[danielroe]

The data can't be reactive on the server. This is a Vue SSR limitation, and has always been the case. On client-side, it can be reactive.

[angelhdzmultimedia]

I don't know if you solved it already or if my solution solves it,
but I came to this thread because I was having apparently same issue.

Vuetify layouts/main.vue with a <NuxtPage/>,
and in App.vue a <NuxtLayout name="main"/>.

middleware/auth.global.ts checks for to.meta.requiresAuth and redirects to login page.
I hit login button on /login page and it sets the Pinia auth store user.isLoggedIn = true, and sets other props like firstName, email and id and then useRouter() to redirect to index page.

When hitting index page, everything was rendering, but when I clicked on profile button on a <v-menu> on the Vuetify <v-app-bar>
(that is defined in the layouts/main.vue), then the /profile page was empty.

After a while researching and thinking, I tried a solution that worked for me in a Vite + Vue 3 + Vue Router project: setting the :key="$route.path" on the <NuxtPage/> and bam! Magically worked!

Hope it helps, wishing you health and success!