Next.js 13中Zustand服务端初始化状态客户端无法获取问题

核心原因 #

• 服务端组件与客户端组件的Zustand实例完全隔离：服务端的Zustand状态仅存在于当前请求的服务端内存中，客户端初始化时会创建全新的Zustand实例，两者状态不共享。
• Zustand默认不支持服务端状态自动hydration：服务端设置的状态不会自动序列化并传递到客户端，客户端无法感知服务端的状态变更。

解决方案 #

方案一：通过Props传递初始状态 #

利用服务端组件可获取异步数据的特性，将拿到的productCategories作为props传递给客户端组件，在客户端内初始化Zustand状态。

1. 服务端MainProvider组件：

import VocabService from './path/to/VocabService';

export default async function MainProvider({ children }) {
  const productCategories = await VocabService.getProductCategories();
  
  // 将初始状态通过props传递给子客户端组件
  const clientChildren = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { initialProductCategories: productCategories });
    }
    return child;
  });

  return (
    <div>
      <Navbar />
      {clientChildren}
      <Footer />
    </div>
  );
}

2. 客户端Home组件：

'use client';
import { useEffect } from 'react';
import { useVocab } from './path/to/vocabStore';

export default function Home({ initialProductCategories }) {
  const vocabStore = useVocab();

  // 客户端初始化时，用props传入的值更新Zustand状态
  useEffect(() => {
    vocabStore.setState({ productCategories: initialProductCategories });
  }, [initialProductCategories, vocabStore]);

  const { productCategories } = vocabStore;
  return (
    <div>
      {productCategories.map(category => (
        <div key={category.id}>{category.name}</div>
      ))}
    </div>
  );
}

方案二：全局变量注入实现状态Hydration #

在服务端把初始状态序列化为全局变量，客户端初始化Zustand时读取该变量完成状态同步。

1. 服务端MainProvider组件：

import VocabService from './path/to/VocabService';

export default async function MainProvider({ children }) {
  const productCategories = await VocabService.getProductCategories();
  // 将初始状态注入为全局变量
  const initialStateScript = `
    window.__INITIAL_ZUSTAND_VOCAB_STATE__ = ${JSON.stringify({ productCategories })};
  `;

  return (
    <>
      <script dangerouslySetInnerHTML={{ __html: initialStateScript }} />
      <Navbar />
      {children}
      <Footer />
    </>
  );
}

2. Zustand Store定义：

import { create } from 'zustand';

export const useVocab = create((set) => ({
  productCategories: [],
  // 其他状态和方法
}));

// 客户端环境下，读取全局变量完成状态hydration
if (typeof window !== 'undefined') {
  const initialState = window.__INITIAL_ZUSTAND_VOCAB_STATE__;
  if (initialState) {
    useVocab.setState(initialState);
  }
}

关键注意点 #

• 服务端组件内调用useVocab.setState无实际意义：服务端的Zustand实例是请求级别的临时实例，不会被客户端复用，该操作仅对服务端本地有效，客户端无法感知。
• 确保传递的状态可序列化：JSON.stringify无法处理函数、Symbol、循环引用等类型，初始状态必须是纯JSON可序列化的数据。

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