Zustand and Next - Persisting state between client components across page reloads

[Undistraction]

In the Zustand docs related to Next.js is the following:

No global stores - Because the store should not be shared across requests, it should not be defined as a global variable. Instead, the store should be created per request.

I understand that Zustand should not be used on the server (due to shared state between requests), and I understand that rendering the store per request avoids this issue, however I'm unclear on whether there is a good pattern to use when we want to share state between client components across requests / page loads.

I can think of two ways of achieving this, but I'd really appreciate some guidance on whether either of these is the best approach.

My use-case is that I have some ephemeral state that I don't need/want to save to the server, but I do need to be able to share between client components on different pages.

The approaches I can think of are:

1. Using zustand's persist middleware alongside the recommended pattern - so that the store is created on each request using the data that is persisted in local storage.
2. Making my App component use client and setting up a Context Provider there which initialises a Zustand store (which will be persisted across page loads). Zustand docs on this.

Thanks.

[dbritto-dev]

@Undistraction in a nutshell:

• If you want to share store between pages you should place your store provider in the Root Layout
• if you want to share store in one page you should place your store provider in the Layout of that page

[Undistraction]

Thanks for replying so quickly. Would definitely be helpful to add some guidance for achieving shared state between pages to the Zustand Next docs, as it definitely reads as if store-per-request is the only supported approach, and I imagine its a very common requirement.

[dbritto-dev]

@Undistraction sure, we are working on improving docs

[andrejmoltok]

Thanks for replying so quickly. Would definitely be helpful to add some guidance for achieving shared state between pages to the Zustand Next docs, as it definitely reads as if store-per-request is the only supported approach, and I imagine its a very common requirement.

Hey,

May I ask for some help on how to create a store provider in Nextjs?

[Undistraction]

I'm away from my laptop until Monday but happy to share what I have then. Are you using TypeScript?

…

On Sat, 14 Dec 2024, 18:47 Pál András Csokán, ***@***.***> wrote: Thanks for replying so quickly. Would definitely be helpful to add some guidance for achieving shared state between pages to the Zustand Next docs <https://zustand.docs.pmnd.rs/guides/nextjs>, as it definitely reads as if store-per-request is the only supported approach, and I imagine its a very common requirement. Hey, May I ask for some help on how to create a store provider in Nextjs? — Reply to this email directly, view it on GitHub <#2897 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABHNUJNXB25I5DWDWRVEPD2FR4KNAVCNFSM6AAAAABTR2MDOGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNJWHAYTKNY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[andrejmoltok]

Yes, I am using typescript. I will be available after 7PM CET.

[Undistraction]

Here you go:

I set the context in my App component (which uses use client). This will be rendered on the server, but the state will be re-initialised on the client and is made available to other client components that use useAppStoreContext. I don't like the fact I have to export useAppStoreContext from here (I'd rather have it in a separate file), however, createContext needs to receive the store as its default value so that it knows the shape/type of it. I guess I could put it in a separate file and just create the app store twice - once for the default value and again for the provider (which has to have a value provided), but that also feels a bit nasty. Anyway, this works and preserves the types for your store.

'use client'

import { createAppStore } from '@/app/state/appStore'
import { createContext, useContext } from 'react'

interface AppProps {
  children: React.ReactNode
}

const appStore = createAppStore()

export const AppStoreContext = createContext(appStore)

export const useAppStoreContext = () => {
  const appStore = useContext(AppStoreContext)
  if (!appStore) {
    throw new Error('You must set the app store')
  }
  return appStore
}

export default function App({ children }: AppProps) {
  return (
    <AppStoreContext.Provider value={appStore}>
      {children}
    </AppStoreContext.Provider>
  )
}

Components then consume:

  const appStore = useAppStoreContext()
  const letterColors = appStore.use.app().some.state // I'm generating the selectors

[Undistraction]

@andrejmoltok ^

[andrejmoltok]

This makes sense. Looks easy enough, but I couldn't have done it on my own. Appreciate your help. Cheers!