zustand/middleware persist option to set initializeWithValue

[knajjars]

The problem

With frameworks that do hydration like Next.js, we have the following flow:

1. The server renders /my-page where there is no persisted store (localStorage), therefore the default values are used and renders the page with them.
2. Then the client renders the HTML, but since the persisted store is sync, the values are available on the first render, which could be different from the default values, the ones that the server used to render (THIS IS THE ISSUE).
3. We get hydration error

Proposal

It would be beneficial to include an option to set if the persisted store should be initiated with values (sync) or not (async).

create<StoreState>()(
  persist(
    (...a) => ({
      ...myStore(...a)
    }),
    {
      name: 'MY-STORE',
      initializeWithValue: false // default to true?
    }
  )
)

This should make the storage async by default, meaning on the first render the persisted values will be undefined, matching what was rendered on the server and therefore, potentially avoiding the Rehydration error. Thoughts?

[dai-shi]

This is what I have been wondering and I decided to change "delayInit=true" by default in the next Jotai version's atomWithStorage.

So, can you confirm if zustand v4.2.0 before #1518 actually works as you expect?
If we need to support two conflicting use cases, adding a new option should be the way to go.

[knajjars]

v4.2.0 does not seem to work as expected either

[dai-shi]

Oh, really. Then, I'm not sure if I understand the implementation correctly.

Would anyone like to try implementing it?
A few notes on the implementation:

• Only change newImpl and leave oldImpl unchanged.
• I think the option is named delayHydrate and defaults to false (suggestion welcome)

[dai-shi]

Follow-up comment: #1537 (comment)

[kecoliva]

I agree with this - so far the only solution to this is preventing the page to render if it's not mounted yet. It feels hacky to create a custom hook to check if the page is mounted before rendering to prevent hydration errors.

[dai-shi]

I agree it feels hacky.
Call for contributors: #1537 (reply in thread)

[dai-shi]

Follow-up comment: #1537 (comment)

[dai-shi]

https://twitter.com/dai_shi/status/1716304792786747646
We had a discussion in Twitter/X, which changed my mind.

I don't think we should add a new option delayHydration which is suboptimal, and it somewhat conflicts with skipHydration option.

Instead, we should explore the use of .getServerState() to avoid the React hydration error.
My understanding is that we don't need to modify Zustand code. It's how we use it. So, it will be for docs, once we figure it out.

Would anyone be able to help? I think we need a minimal repro first.
cc @TkDodo @pawelblaszczyk5 @dbritto-dev

[David05500]

any info on how to inizilize a store with server-side props on first render?

[dbritto-dev]

@David05500 here you go -> https://stackblitz.com/edit/nextjs-and-zustand-persist?file=app%2F_providers%2Fcounter-store-provider.tsx

[David05500]

@dbritto-dev Hey, cheers for the quick response. I just had a look at the example you posted. Correct me if I am wrong, but in the example the store:

• is being persisted into localStorage (its not using server data)
• there is a loading state while the store is hydrating

I want to pass data to the Provider from the server and initialize the store with that data on first render. And I dont want to persist my data to localStorage. I tried doing it with useRef or useEffect, but I was still getting the hydration error =(

As far as I understand after looking into all of it today, its not possible, due to how Zustand works with app router??

edit - I just realized that I am in a bit of different thread than what my issue is.

EDIT 2 - Nevermind, I was an idiot for a few hours, thought the hydration issue I was facing was due to my zustand store set up, but it was due to next-themes =/// sorry for taking your time

[sovetski]

I want to pass data to the Provider from the server and initialize the store with that data on first render.

same here, I don't find any information in zustand docs... @dai-shi there are a lot of different PRs, comments about this subject, can you please give us a concrete recommended solution?

[dai-shi]

I have some ideas, but we haven't reached consensus yet.
This should be one of recent discussions: #3055 (comment)