next.js에서 zustand를 쓸 때는 주의해야 한다

• next.js는 SSR을 이용하고 있다.

• zustand는 전역변수를 활용해 상태관리를 한다

• 바람직한 상태관리는 request단위로 이뤄져야지, 여러 request가 하나의 상태를 공유해서는 안 된다.

Zustand Documentation

Zustand is a small, fast and scalable bearbones state-management solution, it has a comfy api based on hooks

https://docs.pmnd.rs/zustand/guides/nextjs

// src/providers/counter-store-provider.tsx
'use client'

import { type ReactNode, createContext, useRef, useContext } from 'react'
import { type StoreApi, useStore } from 'zustand'

import { type CounterStore, createCounterStore } from '@/stores/counter-store'

export const CounterStoreContext = createContext<StoreApi<CounterStore> | null>(
  null,
)

export interface CounterStoreProviderProps {
  children: ReactNode
}

export const CounterStoreProvider = ({
  children,
}: CounterStoreProviderProps) => {
  const storeRef = useRef<StoreApi<CounterStore>>()
  if (!storeRef.current) {
    storeRef.current = createCounterStore()
  }

  return (
    <CounterStoreContext.Provider value={storeRef.current}>
      {children}
    </CounterStoreContext.Provider>)
}

export const useCounterStore = <T,>(
  selector: (store: CounterStore) => T,
): T => {
  const counterStoreContext = useContext(CounterStoreContext)

  if (!counterStoreContext) {
    throw new Error(`useCounterStore must be use within CounterStoreProvider`)
  }

  return useStore(counterStoreContext, selector)
}

결론