Next.js中Zustand从LocalStorage加载初始状态的优化方案咨询

针对服务端渲染时LocalStorage不可用导致的报错，推荐以下几种无需依赖组件useEffect或定时器的解决方案，让加载逻辑尽可能留在store内部：

方案一：客户端环境下自动加载LocalStorage #

在store初始化时通过typeof window !== 'undefined'区分环境，仅在客户端执行LocalStorage读取逻辑，服务端直接使用默认状态：

const getDefaultProject = (): Project => ({
  projectName: '',
  cards: [],
})

const useProjectStore = create<ProjectStore>((set) => {
  // 初始状态用默认值
  const initialState = getDefaultProject()

  // 仅在客户端环境加载LocalStorage数据
  if (typeof window !== 'undefined') {
    const savedProject = loadCurrentProjectFromLs()
    if (savedProject) {
      set(savedProject)
    }
  }

  return {
    ...initialState,
    // 其他store方法...
  }
})

优点：组件无需任何额外代码，store自动完成初始化，逻辑完全内聚在store中。

方案二：封装初始化逻辑为store方法+自定义hook #

将加载LocalStorage的逻辑封装为store的内置方法，再通过自定义hook在客户端挂载时触发，既保持store逻辑独立，又避免组件直接写useEffect：

const getDefaultProject = (): Project => ({
  projectName: '',
  cards: [],
})

const useProjectStore = create<ProjectStore>((set) => ({
  ...getDefaultProject(),
  // 封装加载逻辑为store方法
  loadFromLocalStorage: () => {
    const savedProject = loadCurrentProjectFromLs()
    if (savedProject) {
      set(savedProject)
    }
  }
}))

// 自定义初始化hook，供客户端组件调用
export const useInitProjectStore = () => {
  const loadFromLocalStorage = useProjectStore(state => state.loadFromLocalStorage)
  useEffect(() => {
    loadFromLocalStorage()
  }, [loadFromLocalStorage])
}

使用时只需在根客户端组件中调用useInitProjectStore()即可，组件无需关心具体加载逻辑。

方案三：适配Next.js的Zustand Persist中间件 #

如果你之前尝试中间件遇到问题，可以通过自定义存储适配器解决服务端报错问题，让官方persist中间件兼容服务端渲染：

import { persist } from 'zustand/middleware'

// 适配服务端的存储对象：服务端时使用空实现，客户端用LocalStorage
const adaptedStorage = typeof window !== 'undefined' 
  ? window.localStorage 
  : {
      getItem: () => null,
      setItem: () => {},
      removeItem: () => {}
    }

const useProjectStore = create(persist<ProjectStore>(
  (set) => ({
    projectName: '',
    cards: [],
    // 其他store方法...
  }),
  {
    name: 'project-storage', // LocalStorage键名
    storage: adaptedStorage,
  }
))

优点：利用官方标准化的持久化方案，无需手动编写加载逻辑，同时避免服务端报错。

内容的提问来源于stack exchange，提问作者Faire