在_app.tsx调用router.replace致页面getServerSideProps返回undefined props

问题本质：路由修改时机打乱SSR渲染流程 #

这不是Next.js的Bug，而是你在_app.tsx中调用router.replace的时机和方式破坏了SSR的正常渲染逻辑：

• 服务端渲染阶段，_app.tsx检测到特定查询字符串并调用router.replace时，Next.js会立刻发起第二次服务端渲染请求——此时查询参数已被移除，getServerSideProps拿不到原始参数，processRequest自然返回undefined，最终组件接收到空数据。
• 客户端渲染阶段，router.replace会触发页面重新挂载，而这次客户端导航不会触发getServerSideProps，组件只能拿到空值；如果把router.replace移到页面组件里，会因为组件生命周期、React Strict Mode的重复渲染等因素，导致更多次的日志输出。

解决方案：调整路由处理逻辑的位置与方式 #

1. 把路由参数处理移到页面组件的客户端生命周期中 #

避免在_app.tsx中修改路由，改在目标页面的useEffect里执行，确保只在客户端渲染完成后处理：

// index.tsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Home({ data }) {
  const router = useRouter();

  useEffect(() => {
    // 检查是否存在需要移除的特定查询参数
    if (router.query.targetParam) {
      // 复制现有查询参数，删除目标参数
      const updatedQuery = { ...router.query };
      delete updatedQuery.targetParam;
      // 使用shallow跳转，避免重新触发getServerSideProps
      router.replace(
        { query: updatedQuery },
        undefined,
        { shallow: true }
      );
    }
  }, [router]);

  return <div>{data ? JSON.stringify(data) : '无数据'}</div>;
}

export async function getServerSideProps(context) {
  // 基于原始查询参数获取数据
  const data = await processRequest(context.query);
  // 确保数据缺失时返回默认值，避免undefined
  return { props: { data: data ?? {} } };
}

2. 启用shallow路由跳转 #

添加shallow: true参数后，路由修改只会更新客户端的URL和路由状态，不会重新触发getServerSideProps，这样就能保留第一次SSR获取到的有效数据。

3. 兼容参数缺失场景 #

在getServerSideProps中给data设置默认值，即使后续路由参数被移除，组件也不会直接拿到undefined。

核心注意事项 #

• _app.tsx的职责是全局布局、全局状态管理或全局样式注入，不要在这里处理页面级的路由逻辑，否则会干扰所有页面的渲染流程。
• 服务端渲染阶段调用router.replace会触发二次SSR，不仅增加服务器负载，还会因为上下文参数丢失导致数据异常。
• React Strict Mode会导致组件生命周期函数执行两次，这是正常的调试机制，不用过度担心，但要确保路由处理逻辑是幂等的（多次执行不会产生副作用）。

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