zustand next 13 set initial state on server and get state on client

Question

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

<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

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

what do you think is wrong with it?

Answer 1

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