Pinia store values in layout is not server side rendered

Environment

• Operating System: Darwin
• Node Version: v16.17.1
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: npm@8.15.0
• Builder: vite
• User Config: runtimeConfig, meta, modules, image, components, build, css, postcss, vite
• Runtime Modules: @pinia/nuxt@0.4.3, nuxt-icons@2.0.2, @vueuse/nuxt@9.4.0, @nuxt/image-edge@1.0.0-27769790.4b27db3
• Build Modules: -

Reproduction

Source code https://github.com/novicell/nuxt3-boilerplate/tree/repro/ssr-layout-hydration

Deployed version https://repro-ssr-layout-hydration--novicell-nuxt3-boilerplate.netlify.app/

Describe the bug

Hi!

We have a general Nuxt 3 boilerplate at Novicell that we use to build various client websites.

We’ve encountered a problem with server side rendering things that is loaded in the layout such as navigation, footer etc.

We use useAsyncData inside our [...slug].vue for rendering CMS pages. To save requests we usually include the navigation in the response on the first page load and set it in our Pinia store which is then loaded inside the layout.

It looks like the layout is rendered before the [...slug].vue and is not hydrated during SSR until the page is loaded.

I’ve made a small example where I have an initial value in the store that is then updated upon fetch of the page.

SSR value

Hydrated value

I’m not sure if this is a bug or a matter of configuration, but please let us know how to solve it 😄

Additional context

No response

Logs

No response

[manniL]

AFAIK: If you change store values inside your page components, you cannot alter components “higher up” like the layout or app.vue with it because they are already rendered during SSR (top-down).

But because the client assumes that the new value is propagated everywhere, it will use it for all components. Thus the hydration error.

[manniL]

Closing here then ☺️