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
2) Component's computed property use pinia store state inside. In
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.json
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.json
StackBlitzYaroslav Yudinskikh
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
