i have next 13 application and i am using zustand as my state manager
currently
i have a simple layout that looks like this

我有Next 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>

for the MainProvider component it looks like this, i am planning to put all providers here and load initial data for the zustand store

对于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;

that's server component as you can see here i am setting the state after all promises resolves and it works very good

这是服务器组件，正如您在这里看到的，我正在设置所有承诺解析后的状态，它工作得非常好

for the page component

对于页面组件

"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;

it's a client component, i am trying to load the state with useVocab.getState function and using the return values and nothing is getting the initial data on the client the initial data is on the server but nothing on the client

这是一个客户端组件，我试图用useVocab.getState函数加载状态，并使用返回值，但没有在客户端上获取初始数据，初始数据在服务器上，但客户端上没有

what do you think is wrong with it?

你认为它有什么问题？

As it is a server components , nextjs 13 force you to bind the server state to client state while intialising the state on server components. Hope this video provides more info for you
https://youtu.be/OpMAH2hzKi8?si=BzxxwjNh40c-GggK

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