Nuxt•6mo ago

[CLOSED]: Hydration Nuxt 3 + Pinia

nuxt 3 can't handle pinia changes on server side Error: "[Vue warn]: Hydration node mismatch:" simple example: https://stackblitz.com/edit/github-6xitgs?file=stores%2FuseTestStore.ts,app.vue,nuxt.config.ts,components%2FTest.vue Observing, I noticed that when we make changes to the state of the pinia variables during component initialization (server-side loading), we have this error, if the change comes after a user interaction (client-side) we do not have these problems. CLOSED discussion: https://github.com/nuxt/nuxt/issues/26508 Conclusion: "I think this is the same issue as https://www.youtube.com/watch?v=dZSNW07sO-A. Global state can't update HTML that has already been rendered." - by: @danielroe

GitHub

Hydration error using asynchronous global state (Pinia, useState) b...

Environment Operating System: Windows_NT Node Version: v20.0.0 Nuxt Version: 3.11.1 CLI Version: 3.11.1 Nitro Version: 2.9.5 Package Manager: npm@9.6.4 Builder: - User Config: app, runtimeConfig, c...

Daniel Roe

YouTube

Server Rendering and Global State

Ever wonder what's different about rendering a Vue app on the server, or why you sometimes get hydration errors with a Pinia store or global state? This video covers why and how you might have a hydration error when using and setting global state.

14 Replies

Orbviox•6mo ago

does updating the store to this help?

import { skipHydrate } from 'pinia'

export const useTestStore = defineStore('test', () => {
  const test = ref(false);

  return { test: skipHydrate(test) };
});

import { skipHydrate } from 'pinia'

export const useTestStore = defineStore('test', () => {
  const test = ref(false);

  return { test: skipHydrate(test) };
});

read https://pinia.vuejs.org/cookbook/composables.html#SSR

leofreedy.•6mo ago

Does this solution have SEO?? Observing my elements, I cant see ☹️

Orbviox•6mo ago

I can't say about SEO - you may need to design around it in a different way I searched on Pinia issues and there was something I had found a while ago, but can't find atm 🤔 https://github.com/vuejs/pinia/discussions?discussions_q=nuxt+hydration

leofreedy.•6mo ago

It seems impossible to use nux3 + pinia + request server-side + SEO, a common case where a page shares information from a backend. It seems that the solution is to replicate the request or make the call in a parent component and move from prop to prop.

Orbviox•6mo ago

if you try out with useState like so: https://nuxt.com/docs/getting-started/state-management#initializing-state and then try to see how to go about this in Pinia oh the usage is here! https://nuxt.com/docs/getting-started/state-management#usage-with-pinia (this is with options syntax)

leofreedy.•6mo ago

options syntax dont work i will try with useState

leofreedy.•6mo ago

I redid my code using useState, but dont work too ☹️ I did two tests and came to this conclusion A: When i'm using the useState in same create component (Just a unique component). It work, no hydration errors; B: When I create and initialization my useState in a component, but use this useState in another component (adjacent). Doesnt work. application of case B: https://stackblitz.com/edit/nuxt-starter-u2kiq1?file=app.vue

Leonardo Frederico da Silva

StackBlitz

Nuxt 3: Hydration error global state management (useState, Pinia) -...

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

leofreedy.•6mo ago

same error, tested here This application is just a minified form of the situation, in my application I have a very large nesting, and doing it by prop I would have to nest it and it would become very strange... in nuxt 2, this would work very well, that's what I don't understand bad ☹️ i lost SEO

leofreedy.•6mo ago

here i can look hydration erros

leofreedy.•6mo ago

refresh page

leofreedy.•6mo ago

wow?

leofreedy.•6mo ago

@L422Y https://www.loom.com/share/bee5fb383cb64d47a56383c83df20ef9

Loom

Nuxt 3: Hydration error global state management (useState, Pinia) (...

leofreedy.•6mo ago

i think dont have a SEO too, look the blink in client side if you test in your location "vscode", you can see about SEO

leofreedy.•6mo ago

@L422Y When I talk about SEO I talk about the issue of html markup on the server side, there is no example that html markup should not be visible to Google and this greatly complicates SEO, it practically becomes a vuejs. See that your request occurs on the client side, very similar to a SPA, without HTML markup with request server side.

Gaming

Programming

[CLOSED]: Hydration Nuxt 3 + Pinia