perf: improve SSR

example/package.json

@@ -3,6 +3,7 @@
   "scripts": {
     "build": "dumi build",
     "build:analyze": "ANALYZE=1 dumi build",
+    "build:no-compress": "COMPRESS=none dumi build",
     "dev": "dumi dev",
     "postinstall": "npm run setup",
     "preview": "dumi preview",

src/components/StoreUpdater/index.tsx

@@ -13,8 +13,7 @@ import isEqual from 'fast-deep-equal';
 import React, { type DependencyList, type EffectCallback, useEffect, useMemo } from 'react';
 
 import { SiteStore, useSiteStore } from '@/store/useSiteStore';
-
-const isBrowser = typeof window !== 'undefined';
+import { isBrowser } from '@/utils';
 
 const SSRInit: Record<string, boolean> = {};
 
@@ -45,7 +44,7 @@ const useSyncState = <T extends keyof SiteStore>(
 ) => {
   const updater = updateMethod
     ? updateMethod
-    : (key: T, value: SiteStore[T]) => useSiteStore.setState({ [key]: value });
+    : (key: T, value: SiteStore[T]) => useSiteStore.setState?.({ [key]: value });
 
   // 如果是 Node 环境，直接更新一次 store
   // 但是为了避免多次更新 store，所以加一个标记
@@ -82,11 +81,11 @@ export const StoreUpdater = () => {
     const { setLoading, ...data } = siteData;
     const {
       siteData: { setLoading: _, ...previousData },
-    } = useSiteStore.getState();
+    } = useSiteStore.getState?.() || { siteData: {} };
 
     if (isEqual(data, previousData)) return;
 
-    useSiteStore.setState({ siteData });
+    useSiteStore.setState?.({ siteData });
   });
 
   useSyncState('sidebar', sidebar);
@@ -98,7 +97,7 @@ export const StoreUpdater = () => {
   useSyncState('navData', navData, () => {
     const data = siteData.themeConfig.hideHomeNav ? navData : [homeNav, ...navData];
 
-    useSiteStore.setState({ navData: data });
+    useSiteStore.setState?.({ navData: data });
   });
 
   return false;

src/layouts/GlobalLayout.tsx

@@ -6,112 +6,14 @@ import {
   logicalPropertiesLinter,
   parentSelectorLinter,
 } from '@ant-design/cssinjs';
-import { ConfigProvider, theme as antdTheme } from 'antd';
-import { ThemeMode } from 'antd-style';
-import { Outlet, usePrefersColor, useServerInsertedHTML } from 'dumi';
+import { Outlet, useServerInsertedHTML } from 'dumi';
 import type { FC } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import SiteContext, { SiteContextProps } from '@/slots/SiteContext';
+import React from 'react';
 
 import { useAdditionalThemeConfig } from '../hooks/useAdditionalThemeConfig';
 
-type SiteState = Partial<Omit<SiteContextProps, 'updateSiteContext'>>;
-const RESPONSIVE_MOBILE = 768;
-const SITE_STATE_LOCALSTORAGE_KEY = 'dumi-theme-yunti-site-state';
-
-const defaultSiteState: SiteState = {
-  isMobile: false,
-  theme: ['light'],
-};
-const getAlgorithm = (themes: ThemeMode[] = []) =>
-  themes.map(theme => {
-    if (theme === 'dark') {
-      return antdTheme.darkAlgorithm;
-    }
-    return antdTheme.defaultAlgorithm;
-  });
-
-const isThemeDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
-const getSiteState = (siteState: any) => {
-  const localSiteState = siteState;
-  const isDark = isThemeDark(); // 系统默认主题
-  const theme = localSiteState?.theme || [];
-  const isAutoTheme = theme.includes('auto');
-  if (isAutoTheme) {
-    const nextTheme = theme.filter((item: string) => item !== 'auto');
-    nextTheme.push(isDark ? 'dark' : 'light');
-    localSiteState.theme = nextTheme;
-  }
-  return Object.assign(defaultSiteState, localSiteState);
-};
-
 const GlobalLayout: FC = () => {
-  const setPrefersColor = usePrefersColor()[2];
-  const { theme: configTheme, ssr, prefersColor } = useAdditionalThemeConfig();
-  const [{ theme, isMobile, direction }, setSiteState] = useState<SiteState>(defaultSiteState);
-
-  // 基于 localStorage 实现
-  const updateSiteConfig = useCallback((props: SiteState) => {
-    try {
-      const localSiteState = JSON.parse(
-        window.localStorage.getItem(SITE_STATE_LOCALSTORAGE_KEY) || '{}'
-      );
-      const nextLocalSiteState = Object.assign(localSiteState, props);
-      window.localStorage.setItem(SITE_STATE_LOCALSTORAGE_KEY, JSON.stringify(nextLocalSiteState));
-      setSiteState(prev => ({
-        ...prev,
-        ...props,
-      }));
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  }, []);
-
-  const updateMobileMode = useCallback(() => {
-    updateSiteConfig({
-      isMobile: window.innerWidth < RESPONSIVE_MOBILE,
-    });
-  }, [updateSiteConfig]);
-
-  useEffect(() => {
-    try {
-      const localSiteState = JSON.parse(
-        window.localStorage.getItem(SITE_STATE_LOCALSTORAGE_KEY) || '{}'
-      );
-      // 首次设置主题样式
-      if (!localSiteState?.theme) {
-        localSiteState.theme = [prefersColor.default];
-      }
-      const siteConfig = getSiteState(localSiteState);
-      updateSiteConfig(siteConfig);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  }, [prefersColor, updateSiteConfig]);
-
-  useEffect(() => {
-    updateMobileMode();
-    // set data-prefers-color
-    setPrefersColor((theme ?? []).includes('dark') ? 'dark' : 'light');
-    window.addEventListener('resize', updateMobileMode);
-    return () => {
-      window.removeEventListener('resize', updateMobileMode);
-    };
-  }, [theme, updateMobileMode, setPrefersColor]);
-
-  const siteContextValue = useMemo(
-    () => ({
-      direction,
-      isMobile: isMobile!,
-      theme: theme!,
-      updateSiteConfig,
-    }),
-    [isMobile, theme, direction, updateSiteConfig]
-  );
-
+  const { ssr } = useAdditionalThemeConfig();
   const [styleCache] = React.useState(() => createCache());
 
   useServerInsertedHTML(() => {
@@ -138,16 +40,9 @@ const GlobalLayout: FC = () => {
   });
 
   const BaseGlobalLayoutJSX = (
-    <SiteContext.Provider value={siteContextValue}>
-      <ConfigProvider
-        theme={{
-          ...configTheme,
-          algorithm: getAlgorithm(theme),
-        }}
-      >
-        <Outlet />
-      </ConfigProvider>
-    </SiteContext.Provider>
+    <>
+      <Outlet />
+    </>
   );
 
   const SSRGlobalLayoutJSX = (

src/slots/SiteContext.ts

@@ -12,7 +12,7 @@ export interface SiteContextProps {
 const SiteContext = createContext<SiteContextProps>({
   direction: 'ltr',
   isMobile: false,
-  theme: ['light'],
+  theme: ['dark'],
   updateSiteConfig: () => {},
 });
 

src/store/initialState.ts

@@ -1,3 +1,13 @@
+import {
+  useIntl,
+  useLocale,
+  useLocation,
+  useNavData,
+  useRouteMeta,
+  useSidebarData,
+  useSiteData,
+  useTabMeta,
+} from 'dumi';
 import { AtomAsset } from 'dumi-assets-types';
 import {
   ILocale,
@@ -9,7 +19,7 @@ import {
 } from 'dumi/dist/client/theme-api/types';
 import { PICKED_PKG_FIELDS } from 'dumi/dist/constants';
 import type { Location } from 'history';
-import { ComponentType } from 'react';
+import { ComponentType, useMemo } from 'react';
 
 import { AllSiteThemeConfig } from '@/types';
 
@@ -86,3 +96,38 @@ export const initialState: SiteStore = {
     themeConfig: {},
   },
 };
+
+export const useInitialState = (): SiteStore => {
+  const { themeConfig }: any = useSiteData();
+  const navData = useNavData();
+  const sidebar = useSidebarData();
+  const routeMeta = useRouteMeta();
+  const tabMeta = useTabMeta();
+  const location = useLocation();
+  const locale = useLocale();
+  const intl = useIntl();
+  const homeNav = useMemo(
+    () => ({
+      activePath: '/',
+      link: '/',
+      title: intl.formatMessage({ id: 'header.nav.home' }),
+    }),
+    [intl]
+  );
+  const newNavdata = themeConfig.hideHomeNav ? navData : [homeNav, ...navData];
+  // console.log('themeConfig', themeConfig);
+
+  return {
+    ...initialState,
+    locale: locale || initialState.locale,
+    location: location || initialState.location,
+    navData: newNavdata || initialState.navData,
+    routeMeta: routeMeta || initialState.routeMeta,
+    sidebar: sidebar || initialState.sidebar,
+    siteData: {
+      ...initialState.siteData,
+      themeConfig,
+    },
+    tabMeta: tabMeta || initialState.tabMeta,
+  };
+};

src/store/useSiteStore.ts

@@ -1,10 +1,27 @@
 import { devtools } from 'zustand/middleware';
 import { createWithEqualityFn } from 'zustand/traditional';
 
-import { SiteStore, initialState } from './initialState';
+import { isBrowser } from '@/utils';
 
-export const useSiteStore = createWithEqualityFn<SiteStore>()(
+import { type SiteStore, initialState, useInitialState } from './initialState';
+
+const browserStore = createWithEqualityFn<SiteStore>()(
   devtools(() => initialState, { name: 'dumi-theme-yunti' })
 );
 
+export const useSiteStore = (
+  isBrowser
+    ? browserStore
+    : <U>(selector: (state: SiteStore) => U, equalityFn?: (a: U, b: U) => boolean): U => {
+        const SSRState = useInitialState();
+        const useStore = createWithEqualityFn<SiteStore>()(
+          devtools(() => SSRState, { name: 'dumi-theme-yunti' })
+        );
+
+        Object.assign(useSiteStore, useStore);
+
+        return useStore(selector, equalityFn);
+      }
+) as typeof browserStore;
+
 export * from './initialState';

src/store/useThemeStore.ts

@@ -8,7 +8,7 @@ export interface ThemeStore {
 export const useThemeStore = createWithEqualityFn<ThemeStore>()(
   persist(
     () => ({
-      themeMode: 'auto' as ThemeMode,
+      themeMode: 'light' as ThemeMode,
     }),
     { name: 'ANTD_STYLE_DOC_STORE' }
   )

src/utils.ts

@@ -0,0 +1 @@
+export const isBrowser = typeof window !== 'undefined';