Next.js 14 App Router+Zustand水合后未恢复SSR初始状态问题求助

针对你遇到的Next.js 14 App Router + Zustand水合前后状态不一致的问题，以下是几个无需逐个组件处理的全局优化方案：

1. 全局状态重置（推荐） #

在Zustand Store中封装状态重置逻辑，然后在根客户端组件（如layout.tsx）中统一触发，一次性恢复所有表单到SSR初始状态：

步骤1：改造Zustand Store #

保存SSR预填充的初始状态，并添加重置方法：

import { create } from 'zustand';

// 定义表单状态类型
type FormState = {
  dropdownValue: string;
  // 其他表单字段
  resetToInitial: () => void;
};

// SSR预填充的初始值（可从服务器端props或全局配置传入）
const ssrInitialState = {
  dropdownValue: 'default_option',
  // 其他字段的SSR初始值
};

export const useFormStore = create<FormState>((set) => ({
  // 初始化时使用SSR传递的状态
  ...ssrInitialState,
  resetToInitial: () => set(ssrInitialState),
}));

步骤2：在根客户端组件触发重置 #

在layout.tsx中引入Store，水合完成后执行重置：

'use client';

import { useEffect } from 'react';
import { useFormStore } from '@/store/form';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const resetToInitial = useFormStore(state => state.resetToInitial);

  // 水合完成后立即重置状态，覆盖用户水合前的操作
  useEffect(() => {
    resetToInitial();
  }, [resetToInitial]);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

2. 禁用水合前的用户交互 #

通过添加全屏遮罩，阻止用户在水合完成前操作页面，从根源避免状态不一致：

实现水合守卫组件 #

'use client';

import { useIsClient } from 'react';

export default function HydrationGuard({ children }: { children: React.ReactNode }) {
  const isClient = useIsClient();

  // 非客户端环境（SSR渲染时）显示遮罩
  if (!isClient) {
    return (
      <div className="fixed inset-0 bg-white/90 z-50 flex items-center justify-center">
        <p>加载中...</p>
      </div>
    );
  }

  return <>{children}</>;
}

在根布局中使用 #

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <HydrationGuard>{children}</HydrationGuard>
      </body>
    </html>
  );
}

3. 客户端初始化自动重置状态 #

利用Zustand的初始化逻辑，在客户端环境下自动触发状态重置：

import { create } from 'zustand';

// 判断是否为客户端环境
const isClient = typeof window !== 'undefined';

const ssrInitialState = {
  dropdownValue: 'default_option',
  // 其他表单字段
};

export const useFormStore = create(() => {
  const initialState = { ...ssrInitialState };

  // 客户端环境下，在水合完成后重置状态
  if (isClient) {
    // 使用requestAnimationFrame确保在React水合完成后执行
    requestAnimationFrame(() => {
      useFormStore.setState(ssrInitialState);
    });
  }

  return initialState;
});

关键注意点 #

• 确保Zustand Store在客户端组件中使用，避免在服务器组件中调用客户端API
• 如果使用SSR预填充状态，需保证ssrInitialState与服务器端渲染时的状态完全一致
• useLayoutEffect比useEffect执行时机更早，若需要更及时的重置，可替换为useLayoutEffect

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