Next.js页面跳转时如何避免未变更公共组件重复渲染

问题复现条件 #

• 基于Next.js技术栈开发，存在A、B两个独立路由页面，两个页面均引入同一个公共组件C
• 页面间通过内置Link组件做客户端跳转时，组件C中空依赖数组的useEffect会重复触发console日志打印
• 已排除React严格模式导致的useEffect执行两次的场景：组件C在页面A完成首次挂载后，自身逻辑、props/state无任何变更，预期跳转至页面B时不应重复执行挂载逻辑
• 复现代码如下：
  页面A：

  import Link from "next/link";
  import C from "@/components/test";
  
  export default function A() {
      return (
          <div>
              <h1>A</h1>
              <C />
              <Link href="/b">B</Link>
          </div>
      );
  }
  

  页面B：

  import C from "@/components/test";
  import Link from "next/link";
  
  export default function B() {
      return (
          <div>
              <h1>B</h1>
              <C />
              <Link href="/a">A</Link>
          </div>
      );
  }
  

  公共组件C：

  import { useEffect } from "react";
  
  export default function C() {
      useEffect(() => {
          console.log(1);
      }, []);
      return <div>component C</div>;
  }
  

核心原因 #

这是Next.js路由机制的默认设计行为，不属于bug：

• Next.js路由切换时，默认会完全卸载旧路由对应的整棵React组件树，再挂载新路由的组件树，框架不会自动跨独立路由页面复用组件实例。
• 即便两个页面引入的是同一份组件代码、组件传入参数完全一致，只要组件挂载在不同的页面路由节点下，跳转时旧页面的C组件会先走完整卸载流程，新页面的C组件会重新走首次挂载流程。空依赖数组的useEffect仅在组件挂载阶段触发，因此会重复执行打印逻辑。
• 注意：这里触发的不是普通props/state变更导致的重渲染，是完整的卸载-重挂载生命周期流程。

解决方案 #

根据业务场景选择对应方案即可：

• 方案1：将公共组件放到共享布局层（推荐）
  这是最符合Next.js设计规范的方案。如果组件C是跨页面固定展示的模块（比如全局导航、页脚、全局播放器），直接把C组件放到根布局（App Router下的app/layout.js，Pages Router下的pages/_app.js）中，布局组件在路由切换时不会被卸载重挂载，C组件自然只会在应用首次加载时挂载一次，后续路由跳转不会重复触发useEffect。
  App Router根布局示例：

  // app/layout.js
  import C from "@/components/test";
  export default function RootLayout({ children }) {
    return (
      <html lang="zh">
        <body>
          <C /> {/* 布局内组件跨路由不会重挂载 */}
          {children}
        </body>
      </html>
    )
  }
  

• 方案2：部分路由共享时使用嵌套布局
  如果C不需要全局展示，仅在A、B这类特定路由下共享，可以将这类路由归为同一个路由分组，给分组配置独立的嵌套布局，把C放到该嵌套布局中，同组内路由跳转时C组件不会被重挂载。
• 方案3：页面级挂载时做逻辑去重
  如果业务要求必须把C放在各个页面内部维护，可以将组件中需要只执行一次的初始化逻辑、持久化状态提到全局存储（比如Context、Zustand、Redux）中，组件挂载时直接读取全局已初始化完成的状态，跳过重复的初始化执行逻辑即可。

注意：不要为了复用组件实例强行篡改Next.js的路由卸载逻辑，会破坏框架内置的路由预加载、缓存等优化能力，优先使用布局层共享组件的方案解决。

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