Next.js页面间共享组件问题：Header组件重复渲染

嗨，这个问题我之前帮好几个开发者解决过，本质是Next.js页面切换时的组件挂载逻辑导致的——每次路由切换，当前页面的整个组件树（包括PageLayout和里面的Header）都会被卸载，新页面的组件树重新挂载，所以Header才会重复渲染。给你几个最实用的解决办法：

1. 将Header移到_app.js/tsx（Pages Router推荐方案） #

Next.js的_app.js（或_app.tsx）是所有页面的全局入口容器，把Header放在这里，它就只会在应用初始化时渲染一次，之后路由切换都不会重新渲染。

示例代码：

// pages/_app.js
import Header from '../components/Header';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Header />
      {/* 这里渲染具体页面内容 */}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

之后你的PageLayout就可以简化成只负责页面内容的容器：

// components/PageLayout.js
export default function PageLayout({ children }) {
  return (
    <div className="page-container">
      {children}
    </div>
  );
}

2. 利用根布局共享Header（App Router专属，Next.js 13+） #

如果你用的是Next.js 13及以上的App Router，直接在根布局app/layout.js里引入Header即可——根布局是全局共享的，所有子页面都会复用这个布局里的Header，完全不会重复渲染。

示例代码：

// app/layout.js
import Header from './components/Header';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Header />
        {children}
      </body>
    </html>
  );
}

3. 缓存Header组件（适合必须保留在PageLayout的场景） #

如果因为某些原因必须把Header留在PageLayout里，可以用React的缓存API让Header跳过重复渲染：

• App Router（Next.js 13+）：用React.cache包裹Header组件

// components/Header.js
import { cache } from 'react';

const Header = cache(() => {
  console.log('Header只会渲染一次！');
  return <header className="site-header">我的站点头部</header>;
});

export default Header;

• Pages Router：用React.memo包裹Header，同时确保Header的props没有频繁变化（比如不要传递每次页面切换都会改变的参数）

// components/Header.js
import { memo } from 'react';

const Header = memo(() => {
  console.log('Header仅在props变化时渲染');
  return <header className="site-header">我的站点头部</header>;
});

export default Header;

不过这个方案不如前两种直接，因为PageLayout还是会跟着页面切换重新渲染，只是Header因为缓存/memo跳过了更新。

内容的提问来源于stack exchange，提问作者K. D.