React/Next.js路由切换时如何避免Header组件及其API重复加载？

核心原因 #

当前每个页面都通过Main组件包裹，路由切换时页面组件（如Home）会卸载并重新挂载，导致Main及其内部的Header、Footer也随之重复渲染，进而触发组件内的API重复请求。

解决方案 #

1. 将全局组件移至自定义_app.js（推荐） #

Next.js的_app.js是应用的根组件，仅在应用初始化时渲染一次，路由切换时不会重新渲染。把Header、Footer等全局组件放在这里，能从根源避免重复渲染。

修改pages/_app.js：

import { useSelector } from 'react-redux';
import { useRouter, useEffect } from 'next/router';
import Header from '../components/Header';
import Footer from '../components/Footer';

// 假设unsecureRoutes是定义好的无需登录的路由列表
const unsecureRoutes = ['/', '/login'];

export default function MyApp({ Component, pageProps }) {
  const { authentication } = useSelector(state => state);
  const router = useRouter();

  useEffect(() => {
    const shouldRedirect = !!unsecureRoutes.find(i => i === router.route) && authentication?.loggedIn;
    if (shouldRedirect) {
      // 已登录用户访问非安全路由时跳转到指定页面，比如仪表盘
      router.push('/dashboard');
    }
  }, [router.route, authentication?.loggedIn]);

  return (
    <>
      <Header menuVisible={false} menuType="Main Menu" />
      <main id="main">
        <Component {...pageProps} />
      </main>
      <Footer />
    </>
  );
}

之后页面组件无需再包裹Main，直接返回内容即可：

// Home.js
export function Home() {
  const { user, loggedIn, authenticating } = useSelector(
    state => state.authentication
  );

  useEffect(() => {
    if (loggedIn && user) {
      // 页面逻辑
    }
  }, [loggedIn, user]);

  return <div>[Content goes here]</div>;
}

export default Home;

2. 优化Main组件避免不必要重渲染 #

若不想修改_app.js，可通过React.memo包裹Main组件，配合精确的状态选择器减少重触发：

// Main.js
import React from 'react';
import { useSelector } from 'react-redux';
import { useRouter } from 'next/router';
import Header from './Header';
import Footer from './Footer';

// 精确选择需要的状态，避免返回新对象导致重渲染
const selectAuthentication = state => ({
  loggedIn: state.authentication?.loggedIn
});

const Main = React.memo((props) => {
  const { loggedIn } = useSelector(selectAuthentication);
  const router = useRouter();
  const shouldRedirect = !!unsecureRoutes.find(i => i === router.route) && loggedIn;

  return (
    <main id="main" className={props.class}>
      <Header menuVisible={false} menuType="Main Menu" />
      {props.children}
      <Footer />
    </main>
  );
});

export default Main;

3. 优化全局组件自身 #

对Header、Footer单独使用React.memo，并优化API请求逻辑：

• 用React.memo包裹组件，浅比较props，仅在必要时重渲染
• 使用useEffect时精准设置依赖项，避免无效触发
• 借助SWR/React Query等缓存库缓存API响应，自动避免重复请求

示例（结合SWR缓存菜单API）：

// components/Header.js
import React from 'react';
import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

const Header = React.memo(({ menuVisible, menuType }) => {
  // SWR会自动缓存请求结果，相同URL重复请求时直接返回缓存数据
  const { data: menuData, error } = useSWR(`/api/menu?type=${menuType}`, fetcher);

  if (error) return <div>菜单加载失败</div>;
  if (!menuData) return <div>加载中...</div>;

  return (
    <header>
      {/* 渲染菜单内容 */}
    </header>
  );
});

export default Header;

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