Question about Next.js 15 App Router + Zustand: Is Provider pattern really necessary when using 'use client'?

[rihun-kim]

Hi Zustand team! 👋

I'm working with Next.js 15 App Router and have a question about the official Next.js guide.

Current Understanding

According to the guide, we should use Provider pattern with factory functions to avoid sharing state across requests. However, I'm wondering if this is still necessary when using 'use client' directive.

My Analysis

When we use 'use client', the behavior seems to be:
Server-side: The client component code (including Zustand store) is completely excluded from the server bundle
Client-side: Each browser/tab gets its own independent JavaScript execution context
Memory isolation: Each browser runs in separate processes with separate memory spaces

'use client'

import { create } from 'zustand'

// This code never executes on the server
export const useUserStore = create((set) => ({
  key: undefined,
  setUser: (user) => set({ ...user }),
}))

Is the Provider + factory pattern still necessary when using 'use client'?
It seems like 'use client' already provides:
✅ Server isolation: Store code doesn't execute on server at all
✅ Client isolation: Each browser = separate process = separate memory
✅ Per-request isolation: Each user request gets independent client-side execution

📡 Server (Node.js)
├── Handles multiple requests simultaneously
├── user-store.ts never executes (due to 'use client')
└── No shared state possible ✅

💻 Browser A (User A)
├── Downloads and executes user-store.ts
├── Creates independent store instance A
└── Isolated memory space

💻 Browser B (User B)
├── Downloads and executes user-store.ts
├── Creates independent store instance B
└── Completely separate from Browser A ✅

Current Project Context

• Using Next.js 15 App Router
• User state should persist across page navigation

Environment:

• Next: 15.0.0
• Zustand: 5.0.3
• Architecture: App Router (not Pages Router)

Specific Questions

1. When is Provider pattern actually required vs. when is 'use client' sufficient?
2. Are there edge cases where 'use client' alone doesn't provide adequate isolation?

Would love to understand the nuanced scenarios where each approach is recommended!
Thanks for the amazing library! 🙏

[dai-shi]

See #2740.

The key point is SSR, which has less to do with RSC or 'use client'.

@dbritto-dev is working on revamping docs, and we would like to add a new guide.

[rihun-kim]

@dai-shi @dbritto-dev

thanks for reply.
So is it okay to use just 'use client' ?
I think there is no reason to use like a guide...

because zustand's strength point is simple.
but if we must use zustand with provider, closure in nextjs, it is really boilerplating code case.
whenever we use zustand, we must another boilerplate codes a lot..
it is non sense...

[dai-shi]

that's what I was proposing in #2740.

[rihun-kim]

@dai-shi @dbritto-dev

yeah i checked it. thx.

But i can't understand why you make code like that.
That is complicated when we use zustand in nextjs.

I think just 'use client' is everything okay. (#3202 (comment))
Right?
But why everyone doesn't use just 'use client' only?
Why do guide code use context & provide & closure??

[dai-shi]

No, even if you have 'use client', unless you can disable SSR, the said concern remains. It doesn't matter if it's pages router or app router. (like, with pages router, everything is like 'use client'.)

[dbritto-dev]

@rihun-kim just to be clear is not a zustand issue is an issue with any global stores in general. You can also read about that on redux docs too.