Wait for Nextjs rehydration before zustand store rehydration

[MoustaphaDev]

Hello, I'm using the persist middleware on my store with Nextjs (SSG) and I got several warnings in dev mode all pointing:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
It doesn't break the app however.

Looks like the zustand store rehydrates before Nextjs has finished its rehydration process.
Is there a way trigger the rehydration of the zustand store after Nextjs' rehydration process or are there better ways of handling this?

[dai-shi]

A confirmation: Is this persist only issue? Or, can the error be reproducible without persist?

[MoustaphaDev]

Thanks for the fast reply. It is in fact persist only issue.

[dai-shi]

@AnatoleLucet can have a look please? (I'm still not sure if this is something that can be solved only with persist.)

@MoustaphaDev Can the issue be reproducible with zustand v3.7.x?

[MoustaphaDev]

Yes it can, just tried to downgrade to v3.7.x but same error.

[AnatoleLucet]

I'm unable to reproduce. @MoustaphaDev could you send a repro in a codesandbox?

[MoustaphaDev]

Sure, here's the sandbox @AnatoleLucet.

[AnatoleLucet]

@MoustaphaDev Thanks.

I think this is a dup of #324

[MoustaphaDev]

Alright, your useHydrated hook trick solved it, thank you!

[isomorpheric]

I'm having the same problem, can only reproduce with persist - however, I'm using Typescript. Will try useHydrated and post follow-up.

Follow-Up: Using the useHasHydrated hook works, but checking for hydration everywhere isn't very DRY. There has to be a simpler way to achieve this globally. 🤔

[AnatoleLucet]

@ecam900 another option is to make your storage engine async (see this comment) which might better fit your use case.

[pixelass]

None of the options above or from the linked issues worked for us. The only way for us to remove the warning without checking if the component was mounted (e.g. useHasHydrated via a custom useEffect), was to trick Zustand into skipping the initial render-cycle before getting the store from window.localStorage.

@AnatoleLucet If you are sure that your solution works, it would be nice if you could provide an MVP Sandbox.

I will provide a few Sandboxes with all solutions we've tested tomorrow, to allow better reproduction and show that my "workaround" works (while not optimal).

This is the solution that works as a workaround for us:

const useStore = create(
  persist(
    (set) => ({
      counter: 0,
      setCounter(counter) {
        set({ counter });
      },
    }),
    {
      name: "next-zustand",
      getStorage: () => ({
        setItem: (...args) => window.localStorage.setItem(...args),
        removeItem: (...args) => window.localStorage.removeItem(...args),
        getItem: async (...args) =>
          new Promise((resolve) => {
            if (typeof window === "undefined") {
              resolve(null);
            } else {
              setTimeout(() => {
                resolve(window.localStorage.getItem(...args));
              }, 0);
            }
          }),
      }),
    }
  )
);

The trick was to add a setTimeout inside getItem. A simple promise (or async function) still wouldn't fix the issue.

Looks ugly, feels ugly… let's face it: "It's ugly"

getItem: async (key) =>
  new Promise((resolve) => {
    setTimeout(() => {
       if (typeof window === "undefined") {
        resolve(null);
      } else {
        setTimeout(() => {
          resolve(window.localStorage.getItem(...args));
        }, 0);
     }
  }),
}),

Side-node: This issue started with React v18 since they seem to handle or warn about hydration different. This might be part of Next.js v12 or React.js v18, We are currently unsure about this.

The only "other" option that worked for us was to not render until the component was mounted on the client but that means either of the following caveats

• Do not render the entire app on the server
• Do not render the component on the server
• Do not render the stateful part of the Component (See: SSR issues with Next.js (and persisting the data) #324 (comment))

[AlwanN01]

@pixelass if your app using authentication, you can send an cookies/local storage from persist middleware to server / next page with gerServersideProps.

/**
 * @callback getServersideProps
 * @param {import('next').GetServerSidePropsContext} context
 */

/**
 * @param {getServersideProps} getServersideProps
 */
const withStore = (getServersideProps = /*default*/  () => ({props:{}}) ) =>
        /*return function*/ async context=>{
          const {req} = context
          const hasToken = req.cookies.token ? true : false
          if (!hasToken) return {redirect: {destination: '/login', permanent: false} }
          //get state from local storage / cookies
          context.state = state =>req.cookies?.[state] ? JSON.parse(req.cookies[state]).state : null
          return getServersideProps(context)
          }

export const getServerSideProps = withStore(context => {
   return {
   props:{
            myStore: context.state('myStorePersistName')
            }
         }
      }
    )
    
import {useMemo} from 'react'
import useStore from '../myStore'
export default function MyPage({myStore}) {
         useMemo(() => myStore && useStore.setState(myStore),[])
         const store = useStore(state => state.data)
         
         return <div>{store}</div>
     }