zustand with nextjs but client side only

[gutisalex]

hey, first off... Zustand is amazing! Having an absolute blast using it... first statemanagent I use that is clean, easy to understand and small in size!!

I have a nextjs application which renders the most of the page prerendered. However I have some client components for which I use zustand. I have one component that has a form which takes some user data and then calls an API for some information according to the inputs. I store the information in zustand because I need it on several other client components. Thats pretty much it...

Ok now to my question: Apparently there are two ways how to create a store both described in the docs. One with create and one with createStore (next specific). I used create for mine and everything works fine so far. But is there something I am missing here? In the next docs stays I should not use a global store, but I kinda do that right? Is there any issue with what I need the store for? Or am I good?

[dbritto-dev]

@gutisalex sure, let me explain you few things:

• createStore is not next specific
• createStore give you the store api so then you can attach it to a hook and bind it to React which is convenient when you want to create isolated stores instead global stores
• There's no something like a store that is shared on server and client, even if you can simulate that like passing the info through cookies back and ford you are synchronizing that info on that backend and then on the client which could lead to some bugs and unexpected behaviors
• You can use Zustand on client side only but that means you need to use packages like client-only or next/dynamic in order to force it to only run on the client
• In our nextjs guide we talked about what you need to take care and what is recommended, please remember that Nextjs render double one on the server and one the client and you need to make sure you are not sharing data across multiple requests. Finally you could find the same recommendations using Redux so is not something related to Zustand but global stores in general

[gutisalex]

ok but is it completely wrong how I implement it when using create? I basically have a store and a client component that uses a useEffect to trigger an init function, that function then sets a loading state and fetches all the data I need, like cookies and api stuff, when finish I reset the loading. Other components which depend on that data I use the loading state to show a loading skeleton (just a wrapper that blurs the component). So the initialisation happens in a useEffect which definitely goes to the client. Having an isolated store would not help me much here, I need one store for several components.
I don't need the state anytime on the server and I don't set it there either... but I know what you mean that every component is at first a server component, too in next.

What does "not sharing data across multiple requests." exactly mean?