Weird behavior with SSR

[thierrymichel]

Hi all,

I am super happy to make our stack evolve and move from vuex to pinia (as well as moving from vue2 to vue3 and from webpack to vite) 😁.
Thanks for the great job! 🙏

Almost everything is perfect except one weird behaviour.
Nothing blocking but I would like to have your lights to understand… 😇

Thanks in advance,
Thierry

---

Reproduction

Clone this repo : pinia-vite-ssr-issue and use yarn dev

Steps to reproduce the behavior

Check the logs and the browser.

Expected behavior

Store instance should have 1 item (as initial state and active pinia instance do).

Actual behavior

Store instance is empty.

Additional information

I've added comments and snippets inside the README file.

[posva]

I’m glad you like it!
There is too much code for the reproduction, can you remove all the routing part and make the code smaller so I can check?

[posva]

Thanks! that looks a lot smaller but it doesn't run anything when visiting localhost 🤔
It's also weird that calling useStore() inside of a sync function changes anything. Have you tried explicitly passing pinia to useStore(pinia)? Maybe that works out in your project

[thierrymichel]

Yes. Also tried, doesn't change anything, same results 😕

[posva]

Right now the repro doesn't run, it gives an empty response when visiting localhost (BTW you can remove everything linting related too, it's not used). Are you sure you are not missing a file somewhere?

[thierrymichel]

Mmmmh. Made a fresh install (clone, yarn, yarn dev) without any problem.
I removed config files and everything unneeded.

• I use NodeJS v16.13.0
• It's on https, port 3000

Beside that 🧐

[posva]

I was having trouble with the https option, disabling it allowed me to run the repro 👍

[posva]

Now I see the problem: on the client side you need to make sure you hydrate the state before using the store:

    const pinia = createPinia()

    app.use(pinia)

    // This does not work
    if (import.meta.env.SSR) {
      doSomethingWithStore()
      const store = useStore()
      store.fetchSomething()
      initialState.pinia = pinia.state.value
    } else {
      pinia.state.value = initialState.pinia
      doSomethingWithStore()
    }

On server you finish by serializing the state to the client while on the client you start by reading (hydrating) the state before using the store.

[thierrymichel]

I not sure I got it.
The counter intuitive thing is that I do not really "do-something-with-store".
I "just" register vue-router guards that will use store actions later…

Calling useStore() seems to generate another "state instance" (?), different from the active one (getActivePinia).

I've updated the repo to reflect that (https://github.com/thierrymichel/pinia-vite-ssr-issue/blob/main/src/module.ts).

Thanks for your time.

[posva]

any useStore() call in client side should go after hydration.

Let me know if something else isn't clear?

[niklv]

Found this behaviour in my Nuxt 4 project.
Only workaround that i found:
Call all of stores that should by hydreted in my plugin. Before any usage in vue components.