Nextjs with zustand, "Text content did not match. Server" error

[lordvcs]

I have been trying to use zustand with nextjs for weeks now. Everything works as intended except when I use persist, in which case I get the error "Warning: Text content did not match. Server: ..." in the console

Here is the codesandbox I have created https://codesandbox.io/s/mystifying-https-upvdxy[increment count, refresh page within the codesandbox browser and open the codesandbox console to see the error]

I know that I can solve the issue by doing an extra step of setting the state in useEffect as shown in this stackoverflow answer https://stackoverflow.com/a/66374800/2532763 but however I was able to get similar functionality with redux without having to use an useEffect. So I am guessing its possible to do the same with zustand too.
P.S I tried it with context too https://github.com/pmndrs/zustand#react-context, however I get the same error.

Does anyone know how to solve this? Any help is appreciated

[lordvcs]

@dai-shi is this really impossible to achieve with nextjs. Please help me sensei.
This already has 4 upvotes, which clearly means that a lot of people face the same issue. Any help is appreciated, thanks in advance

[dai-shi]

How does redux solve this?
The server sends "0" and the client renders with "1" from the storage, so the warning is correct.
Only a method to remove the warning would be to render twice. Is it what you'd expect?
If so, useEffect sounds reasonable. Alternatively, you could try to make a storage to return a promise.

      getStorage: () => ({
        getItem: async (name) => sessionStorage.getItem(name),
        setItem: (name, value) => sessionStorage.setItem(name, value),
        removeItem: (name) => sessionStorage.removeItem(name),
      }),

@AnatoleLucet any thoughts?

[AnatoleLucet]

Not sure how Redux solves this, but I'd be interested to know.
Please see #324 and more particularly this comment. Also, this part of the doc might help.

[AlwanN01]

@lordvcs the simple way u can add suppressHydrationWarning on your html tag attribute.
<h1 suppressHydrationWarning>{useStore.count}</h1>
another solution with useState and useEffect:

` const countStore= useStore(state => state.count)

const [count, setCount] = useState(0)
useEffect(() => {
setCount(countStore)
}, [countStore])

return count in jsx`

[IRediTOTO]

Use useeffect need too many repeat step :(

[craj68168]

thank you this work for me

[IRediTOTO]

Look like we must use useEffect. Here is my solution but sorter.
Use useMountedState hook, detail here https://github.com/streamich/react-use/blob/master/docs/useMountedState.md

  const isMounted = useMountedState();
...

<MyPage  
 pageTitle={isMounted() ? `Project ${selectedProject?.name}` : <Spin />}
 />

[StevenBarquet]

This error only happen in development don't worry too much, you can disable the persist middleware forNODE_ENV !== 'production'

[dai-shi]

Related discussion: #1537

[mesmerize86]

@lordvcs I'm having the same issue. Did you manage to solve this without using useEffect?

[notpritam]

This will help you i think, although this use UseEffect also :- https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5

[lexsemenenko]

Struggling with this error as well. I am trying to set skipHydration: true from Zustand to control when the first hydration of the store occurs. Seem like with synchronous hydration (like Persist), the store is hydrated at its creation that messes up with server renders.

Then hydrate when needed after components mounted. etc..

https://docs.pmnd.rs/zustand/integrations/persisting-store-data#skiphydration

EDIT: Yep! That totally fixed it for me.

1. skipHydration: true, // Initial hydration skip
2. Create client component ClientRehydrator.tsx
3. Included the ClientRehydrator at the bottom of my Layout.tsx file but inside the store provider.

'use client';
import { useEffect } from 'react';
import { useCart } from '@store/CartProvider';

const ClientRehydrator = () => {
    const cartStore = useCart();

    useEffect(() => {
        cartStore.persist.rehydrate(); // Manually rehydrate the store
    }, [cartStore]);

    return null; // Render nothing
};

export default ClientRehydrator;

[dai-shi]

Nice to share your fix!

Also related: #1537 (comment)