Zustand与Suspense结合导致Next.js应用崩溃问题求助

问题根源 #

这是因为Zustand的默认状态初始化逻辑在Next.js的SSR/SSG流程中，会和React Suspense的异步渲染机制产生冲突——哪怕Suspense块看起来和状态仓库完全无关，它也会改变组件树的渲染优先级和执行顺序，导致Zustand的状态初始化时机异常，最终触发应用崩溃。

可行解决方案 #

方案1：用createContext做SSR安全的状态隔离

修改Zustand仓库的创建方式，通过React上下文显式管理状态实例，确保在SSR流程中状态正确初始化：

import { createContext, useContext } from "react";
import { createStore, useStore } from "zustand";

// 创建专属上下文
const StoreContext = createContext(null);

// 全局状态提供者组件
export const StoreProvider = ({ children }) => {
  const store = createStore((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }));
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

// 自定义Hook，统一获取状态
export const useZustandStore = (selector) => {
  const store = useContext(StoreContext);
  if (!store) throw new Error("状态必须在StoreProvider内部使用");
  return useStore(store, selector);
};

之后在_app.js中用StoreProvider包裹整个应用，状态会在组件树内正确隔离，不受Suspense渲染流程的干扰。

方案2：禁用Zustand的SSR支持（纯客户端场景）

如果你的应用不需要服务端渲染，可以直接在创建仓库时开启skipHydration选项，强制Zustand只在客户端初始化状态：

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}), {
  skipHydration: true,
});

这个方法简单直接，但仅适用于完全不需要SSR/SSG的Next.js应用。

方案3：延迟Suspense组件到客户端渲染

如果必须保留Suspense和SSR，可以用Next.js的dynamic导入组件并禁用SSR，让Suspense只在客户端生效：

import dynamic from 'next/dynamic';

// 动态导入包含Suspense的组件，关闭SSR
const SuspenseComponent = dynamic(() => import('./YourSuspenseComponent'), {
  ssr: false,
});

这样Suspense不会在服务端渲染阶段干扰Zustand的状态初始化，从根源避免崩溃。

内容的提问来源于stack exchange，提问作者Seltsam