javascript - zustand next 13 在服务器上设置初始状态并在客户端上获取状态

Question

我有接下来的 13 个应用程序，我正在使用 zustand 作为我的状态管理器 现在 我有一个简单的布局，如下所示

<MainProvider>
  <div className="min-h-screen flex flex-col">
    <Navbar></Navbar>
    <main className="layout flex-1 flex flex-col">{children}</main>
    <Footer></Footer>
  </div>
</MainProvider>

对于 MainProvider 组件，它看起来像这样，我计划将所有提供程序放在这里并加载 zustand 存储的初始数据

import React from "react";
import ReactQueryProvider from "./ReactQueryProvider";
import VocabService from "@/services/vocab.service";
import { useVocab } from "@/store";

export type MainProviderProps = {
  children: React.JSX.Element;
};

const getInitialVocab = async () => {
  const [productCategories] = await Promise.all([
    VocabService.getProductCategories(),
  ]);
  useVocab.setState({ productCategories });
};

const MainProvider = ({ children }: MainProviderProps) => {
  getInitialVocab();

  return <ReactQueryProvider>{children}</ReactQueryProvider>;
};

export default MainProvider;

这是服务器组件，正如您在这里看到的那样，我正在设置所有 promise 解析后的状态，并且效果非常好

对于页面组件

"use client";
import { useEffect, useState } from "react";
import Product from "@/components/Product";
import Breadcrumbs from "@/components/elements/Breadcrumbs";
import { useVocab } from "@/store";

const Home = () => {
  const productCategories = useVocab();

  useEffect(() => {
    console.log(useVocab.getState(), new Date().getTime());
    console.log(productCategories);
  }, [productCategories]);

  return (
    <>
      <div className="breadcrumbs bg-gray-200 py-4">
        <div className="container mx-auto">
          <Breadcrumbs
            items={[
              { name: "a", link: "a" },
              { name: "b", link: "b" },
            ]}
          />
        </div>
      </div>

      <div className="page flex-1 bg-red-200">
        <div className="container mx-auto">
          <h1>page</h1>
          <div className="flex">
            <Product
              currency="egp"
              image=""
              name="test"
              price={123}
              rate={1}
              reviews={24}
            ></Product>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

它是一个客户端组件，我尝试使用 useVocab.getState 函数加载状态并使用返回值，但客户端上没有任何内容获取初始数据。初始数据位于服务器上，但客户端上没有任何内容

你认为这有什么问题吗？

Answer 1

由于它是一个服务器组件，nextjs 13 强制您在初始化服务器组件上的状态时将服务器状态绑定(bind)到客户端状态。希望这个视频能为您提供更多信息 https://youtu.be/OpMAH2hzKi8?si=BzxxwjNh40c-GggK