next-redux-wrapper使用时HYDRATE action多次触发问题咨询

核心结论 #

HYDRATE 触发2次及以上属于框架正常行为，不是配置错误，和服务端逻辑执行次数无关，你观察到getServerSideProps内日志仅打印1次已经可以佐证服务端逻辑没有重复执行。

多次触发的常见原因 #

• 开发环境默认开启 React 严格模式（Strict Mode），会双执行渲染、注水相关逻辑，固定多触发1次HYDRATE，生产环境构建后该额外触发会自动消失，这是本地开发看到至少2次触发的最核心原因。
• 页面存在客户端路由跳转（如通过next/link跳转至当前SSR页面）、_app和页面级SSR逻辑同时触发注水、动态导入配置异常时，会出现3-4次HYDRATE触发。

现有代码的问题修正 #

你当前代码的核心问题不是HYDRATE触发次数，是HYDRATE触发时的状态合并逻辑错误，多次触发会直接导致状态累加异常。

1. 清理冗余导入，修正HYDRATE状态合并逻辑
   你之前在HYDRATE处理中手动累加服务端和客户端的count值，会在多次HYDRATE时重复计算数值，正确逻辑是服务端注水状态优先，直接合并即可，不需要手动做数值累加。
   修正后的store配置代码：

   // 移除无用的redux原生createStore、applyMiddleware导入，Redux Toolkit已经内置相关能力
   import { combineReducers, configureStore } from "@reduxjs/toolkit";
   import count from "../ReduxSlices/CounterSlice";
   import { createWrapper, HYDRATE } from "next-redux-wrapper";
   
   const combinedReducer = combineReducers({
     count,
   });
   
   const reducer = (state, action) => {
     if (action.type === HYDRATE) {
       // 合并时优先采用服务端返回的状态，保留客户端侧独立状态即可
       return {
         ...state,
         ...action.payload
       };
     }
     return combinedReducer(state, action);
   };
   
   export const makeStore = () =>
     configureStore({
       reducer,
     });
   
   // 仅开发环境开启debug日志，生产环境关闭减少冗余输出
   export const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === "development" });
   

2. 检查_app入口配置
   确保_app文件正确使用wrapper包裹，不要在_app层重复添加多余的SSR逻辑或store初始化逻辑，否则会额外触发一次HYDRATE：

   // pages/_app.js
   import { wrapper } from "../path-to-your-store";
   import { Provider } from "react-redux";
   
   export default function MyApp({ Component, pageProps }) {
     const { store, props } = wrapper.useWrappedStore(pageProps);
     return (
       <Provider store={store}>
         <Component {...props.pageProps} />
       </Provider>
     );
   }
   

验证方式 #

执行生产环境构建命令npm run build && npm start后访问页面，正常场景下HYDRATE只会触发1次，开发环境的2次触发属于严格模式的预期行为，不需要额外修复。
如果生产环境仍然出现超过1次的HYDRATE触发，再逐一排查以下场景：

• 页面是否存在客户端侧重复触发路由跳转的逻辑
• 是否混用了Next.js 13+ App Router和Pages Router的next-redux-wrapper适配方案
• 是否存在动态导入组件的SSR配置异常
• 是否在客户端渲染阶段手动触发了和注水相关的store action

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