Wait for Nextjs rehydration before zustand store rehydration

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?

[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: https://github.com/pmndrs/zustand/issues/324#issuecomment-1028416353)

[MoustaphaDev]

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