Inconsistency between UI and data when using Zustand and NextJs

[andrey-sheremeta]

Hello.

I faced one problem while using NextJs(12) and Zustand(4). There is an inconsistency between UI and data, leading to many different defects.

F.e.
you have two pages A & B; each page returns its data via getServerSideProps. so on the client side when a user navigates from page A to page B, to properly render a page we need to update Zustand store with new data received from the server. The current approach that is described here https://docs.pmnd.rs/zustand/guides/initialize-state-with-props encourages to use useEffect
but it leads to different defects (addition rerendering, inconsistency between UI and data and etc.). Is there any alternative way to update the store, without using useEffect?

In my understanding, it's quite a critical thing.

repo with example - https://github.com/andrey-sheremeta/zustand-state-update

I was trying to remove useEffect it seems work but then only react returns an error - facebook/react#18178 (comment)

[noconsulate]

I just went through all this but I'm using the App router rather than the Pages router, so I'm using server and client components. I got it to work doing this though I had to also wrap the client component provider component in another server component that does the initial fetch. That might not make any sense if you're not used to using the App router.

You may find this helpful, as they seem to be doing what you're after using getServerSideProps and all that.

It's worth noting once I got the initial state with props and context providing and all that my store and UI are working flawlessly.

[Harshit-Mourya]

Thanks @andrey-sheremeta and @dbritto-dev for your inputs!

I’ve actually submitted a PR here that tries to address this issue:
fix: sync Zustand store with SSR props after client navigation

It introduces a useSyncPageName hook to safely hydrate the store during SSR and client navigation without extra re-renders or stale state.

It’d be great to get feedback or suggestions for improvements.

[dbritto-dev]

@Harshit-Mourya btw, I wouldn't use global store with next.js we recommend to create them on each request

[Harshit-Mourya]

Thanks for the tip! Makes sense — I’ll try switching to a per-request store pattern instead of a global one.

Just to clarify: would wrapping createStore in a function like initStore() and calling that in each request handler (or component tree for RSC) be the right approach?

[dbritto-dev]

@Harshit-Mourya here you go -> https://stackblitz.com/edit/nextjs-and-zustand-persist-snefbl8b?file=README.md

[Harshit-Mourya]

Updated the PR to use a per-request store with createUiStore() as suggested.
Also refactored _app.tsx and added UiStoreContext to provide the store via context.

PR: andrey-sheremeta/zustand-state-update#1