Hydration mismatch + SSR rendering order + Pinia reacitvity
Hello! I met a problem with nuxt rendering order and pinia reactivity on server side.
1) Computed property in component which defined above the <NuxtPage> in the layout computes earlier that
setup in page component.
2) Component's computed property use pinia store state inside. In setup one of the pinia store state mutates.
Expected: Component computed property recomputes and use modified pinia state
Reality: Computed property computes only ones on the server and server render NOT modified state. It goes to the client, hydrate, and only after that re-render with the new state and cause hydration mismatch.
Reproduction: https://stackblitz.com/edit/nuxt-starter-cbptfh?file=package.jsonYaroslav Yudinskikh
StackBlitz
Nuxt - Pinia SSR reactivity - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
4 Replies
GitHub
Simple page hydration problem · Issue #19258 · nuxt/nuxt
Environment Operating System: Windows_NT Node Version: v18.14.1 Nuxt Version: 3.2.2 Nitro Version: 2.2.3 Package Manager: npm@9.3.1 Builder: vite User Config: - Runtime Modules: - Build Modules: - ...
Seems it is. Thank you
Is this working?
Should we change the state of the pin at the level before the components? That would be the same thing as prop...
We had pinia state comsumers components at a layout level while mutation appers on page level, we fixed it using <NuxtLayout name> and definePageMeta({ layout: false }) on a pages