Zustand caching issue with Next.js 13.4 SSR and server components.

[haramishra]

zustand.bug.mp4

I implemented Zustand using this guide, but when multiple users visit the website, the store is shared between the users.

The above video shows the billing and pricing component that should render differently for authenticated and unauthenticated users. However, states are shared between the two users. I added "force-dynamic" to the pages, but the issue remains the same.

Repo - https://github.com/haramishra/supanext-nextjs13-starter/tree/with-zustand
page.tsx - https://github.com/haramishra/supanext-nextjs13-starter/blob/with-zustand/src/app/page.tsx
layout.tsx - https://github.com/haramishra/supanext-nextjs13-starter/blob/with-zustand/src/app/layout.tsx

[dai-shi]

Sharing state across sessions in SSR is a known behavior.
You want to use React Context to avoid it.