Next.js SSR场景下使用zustand持久化客户端状态出现渲染冲突如何解决？

这个问题是SSR/SSG场景下的hydrate不匹配问题，服务端渲染阶段无法读取客户端localStorage的存储值，生成的静态HTML用的是默认状态，客户端hydrate初始阶段会先复用服务端内容，等zustand加载完本地存储的状态后触发更新，两端内容不一致就会触发样式不匹配警告，如果DOM结构差异过大还会导致hydration错误直接崩溃。

• 方案1：标记hydration完成状态后再加载本地存储状态
  先实现一个判断hydration是否完成的自定义钩子：

  import { useState, useEffect } from 'react'
  
  function useHydrationComplete() {
    const [isHydrated, setIsHydrated] = useState(false)
    useEffect(() => {
      setIsHydrated(true)
    }, [])
    return isHydrated
  }
  

  在使用zustand状态的组件中调用这个钩子，hydration完成前统一使用服务端默认值：

  const isHydrated = useHydrationComplete()
  const width = useStore(state => isHydrated ? state.width : 400)
  // 控制组件挂载的场景同理
  const showComponent = useStore(state => isHydrated ? state.showComponent : true)
  

  这个方案可以保证hydration阶段两端内容完全一致，不会触发冲突，hydration完成后自动切换到用户本地存储的状态。

• 方案2：调整zustand persist中间件配置，手动控制hydrate时机
  创建store时给persist中间件添加skipHydration: true配置，禁止初始化时自动加载本地存储：

  import { create } from 'zustand'
  import { persist } from 'zustand/middleware'
  
  const useStore = create(
    persist(
      (set) => ({
        width: 400,
        showComponent: true,
        setWidth: (w) => set({ width: w }),
        toggleComponent: () => set(state => ({ showComponent: !state.showComponent }))
      }),
      {
        name: 'app-storage',
        skipHydration: true // 关闭自动hydrate
      }
    )
  )
  

  然后在项目根组件的useEffect中手动触发hydrate：

  useEffect(() => {
    useStore.persist.rehydrate()
  }, [])
  

• 方案3：将依赖本地存储状态的组件封装为仅客户端渲染组件
  实现一个ClientOnly包装组件，服务端渲染阶段返回占位内容，仅客户端hydrate完成后才渲染实际组件：

  'use client' // Next.js 13+ App Router需要加这个标记
  import { useState, useEffect } from 'react'
  
  export default function ClientOnly({ children, fallback = null }) {
    const [isHydrated, setIsHydrated] = useState(false)
    useEffect(() => {
      setIsHydrated(true)
    }, [])
    return isHydrated ? children : fallback
  }
  

  用这个组件包裹所有依赖zustand本地存储状态的内容：

  <ClientOnly fallback={<div style={{width: '400px'}} />}>
    <YourComponent />
  </ClientOnly>
  

  针对控制组件挂载卸载的场景，用这个方案可以完全避免服务端和客户端结构不一致的崩溃问题。

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