🐛 fix: 修正首屏 SSR 的内容不正确的 bug

package.json

@@ -74,7 +74,8 @@
     "react-syntax-highlighter": "^15",
     "shiki-es": "^0.2",
     "use-merge-value": "^1",
-    "zustand": "^4"
+    "zustand": "^4",
+    "zustand-utils": "^1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17",

src/components/StoreUpdater/index.tsx

@@ -10,7 +10,7 @@ import {
 } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import React, { memo, useEffect } from 'react';
-import { SiteStore, useSiteStore } from '../../store/useSiteStore';
+import { SiteStore, useStoreApi } from '../../store/useSiteStore';
 
 const isBrowser = typeof window !== 'undefined';
 
@@ -40,9 +40,10 @@ const useSyncState = <T extends keyof SiteStore>(
   value: SiteStore[T],
   updateMethod?: (key: T, value: SiteStore[T]) => void,
 ) => {
+  const storeApi = useStoreApi();
   const updater = updateMethod
     ? updateMethod
-    : (key: T, value: SiteStore[T]) => useSiteStore.setState({ [key]: value });
+    : (key: T, value: SiteStore[T]) => storeApi.setState({ [key]: value });
 
   // 如果是 Node 环境，直接更新一次 store
   // 但是为了避免多次更新 store，所以加一个标记
@@ -70,18 +71,19 @@ export const StoreUpdater = memo(() => {
   const navData = useNavData();
   const location = useLocation();
   const locale = useLocale();
+  const storeApi = useStoreApi();
 
   useSyncState('siteData', siteData, () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { setLoading, ...data } = siteData;
     const {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       siteData: { setLoading: _, ...prevData },
-    } = useSiteStore.getState();
+    } = storeApi.getState();
 
     if (isEqual(data, prevData)) return;
 
-    useSiteStore.setState({ siteData });
+    storeApi.setState({ siteData });
   });
 
   useSyncState('sidebar', sidebar);
@@ -93,7 +95,7 @@ export const StoreUpdater = memo(() => {
   useSyncState('navData', navData, () => {
     const data = siteData.themeConfig.hideHomeNav ? navData : [homeNav, ...navData];
 
-    useSiteStore.setState({ navData: data });
+    storeApi.setState({ navData: data });
   });
 
   return null;

src/layouts/DocLayout/index.tsx

@@ -1,15 +1,25 @@
 import { extractStaticStyle } from 'antd-style';
-import { Helmet, useIntl, useLocation } from 'dumi';
+import {
+  Helmet,
+  useIntl,
+  useLocale,
+  useLocation,
+  useNavData,
+  useRouteMeta,
+  useSidebarData,
+  useSiteData,
+  useTabMeta,
+} from 'dumi';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, type FC } from 'react';
+import { PropsWithChildren, memo, useEffect, useMemo, type FC } from 'react';
 
 import DumiSiteProvider from '../../components/DumiSiteProvider';
 import { StoreUpdater } from '../../components/StoreUpdater';
 
 import Docs from '../../pages/Docs';
 import Home from '../../pages/Home';
 
-import { isHeroPageSel, tokenSel, useSiteStore } from '../../store';
+import { Provider, createStore, isHeroPageSel, tokenSel, useSiteStore } from '../../store';
 import { GlobalStyle } from './styles';
 
 const DocLayout: FC = memo(() => {
@@ -64,12 +74,29 @@ const ThemeProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default () => (
-  <>
+const App = memo(({ initState }: any) => (
+  <Provider createStore={() => createStore(initState)}>
     <StoreUpdater />
     <ThemeProvider>
       <GlobalStyle />
       <DocLayout />
     </ThemeProvider>
-  </>
-);
+  </Provider>
+));
+
+export default () => {
+  const siteData = useSiteData();
+  const sidebar = useSidebarData();
+  const routeMeta = useRouteMeta();
+  const tabMeta = useTabMeta();
+  const navData = useNavData();
+  const location = useLocation();
+  const locale = useLocale();
+
+  const initState = useMemo(
+    () => ({ siteData, navData, locale, location, routeMeta, tabMeta, sidebar }),
+    [],
+  );
+
+  return <App initState={initState} />;
+};

src/store/useSiteStore.ts

@@ -12,7 +12,8 @@ import { PICKED_PKG_FIELDS } from 'dumi/dist/constants';
 import type { Location } from 'history';
 
 import { ComponentType } from 'react';
-import { create } from 'zustand';
+import { create, StoreApi } from 'zustand';
+import { createContext } from 'zustand-utils';
 import { devtools } from 'zustand/middleware';
 
 export type NavData = (INavItem & { children?: INavItem[] | undefined })[];
@@ -46,46 +47,8 @@ export interface SiteStore {
   locale: ILocale;
 }
 
-const initialState: SiteStore = {
-  siteData: {
-    // @ts-ignore
-    setLoading: undefined,
-    loading: true,
-    pkg: {},
-    components: {},
-    demos: {},
-    locales: [],
-    entryExports: {},
-    // @ts-ignore
-    themeConfig: {},
-  },
-  sidebar: [],
-  navData: [],
+export const createStore = (initState: SiteStore) =>
+  create<SiteStore>()(devtools(() => initState, { name: 'dumi-theme-antd-style' }));
 
-  location: {
-    pathname: '',
-    state: '',
-    search: '',
-    hash: '',
-    key: '',
-  },
-
-  routeMeta: {
-    toc: [],
-    texts: [],
-    tabs: undefined,
-    // @ts-ignore
-    frontmatter: {},
-  },
-
-  locale: { id: 'zh-CN', name: '中文', suffix: '' },
-};
-
-export const useSiteStore = create<SiteStore>()(
-  devtools(
-    () => ({
-      ...initialState,
-    }),
-    { name: 'dumi-theme-antd-style' },
-  ),
-);
+const { useStore, useStoreApi, Provider } = createContext<StoreApi<SiteStore>>();
+export { useStore as useSiteStore, Provider, useStoreApi };