Next.js项目中点击导航栏Logo跳转首页时，如何避免重复执行getStaticProps？

你遇到的核心问题是**shallow={true}在跨页面跳转时不起作用**——它只针对同一页面组件内的路由参数变化（比如/post/1到/post/2），而从其他页面跳转到首页（/）属于加载全新的页面组件，Next.js仍会触发该页面的getStaticProps，这就导致了每次跳转都要重新获取大量数据，拖慢响应。

下面是几个能彻底解决这个问题的方案，按推荐程度排序：

方案1：阻止首页内的重复跳转 #

首先最直接的优化：如果用户已经在首页，点击Logo时直接阻止跳转，避免不必要的页面加载和数据请求。

// 导航栏组件
import { useRouter } from 'next/router';
import Link from 'next/link';
import Image from 'next/image';

export default function Navbar() {
  const router = useRouter();

  const handleLogoClick = (e) => {
    // 判断当前是否已经在首页路由
    if (router.pathname === '/') {
      e.preventDefault();
      // 可选：点击Logo时平滑滚动到页面顶部，提升体验
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <Link href="/" onClick={handleLogoClick}>
      <Image 
        src={`${someImageUrl}`} 
        width={100} 
        height={100} 
        alt="网站Logo" 
        priority 
      />
    </Link>
  );
}

这个方案能解决用户在首页时误点Logo的场景，但如果是从其他页面跳转到首页，还是会触发getStaticProps，所以需要结合下面的方案。

方案2：客户端缓存首页数据 #

把getStaticProps获取的数据存在全局状态（比如React Context）或localStorage中，首页组件优先读取缓存数据，避免重复请求。

步骤1：在_app.js中创建全局数据上下文 #

// pages/_app.js
import { createContext, useState, useEffect } from 'react';

// 创建上下文用于共享首页数据
export const HomeDataContext = createContext(null);

export default function MyApp({ Component, pageProps }) {
  const [homeData, setHomeData] = useState(pageProps.initialHomeData);

  useEffect(() => {
    // 客户端环境下，把初始数据存入localStorage做持久化缓存
    if (typeof window !== 'undefined' && homeData) {
      localStorage.setItem('homeData', JSON.stringify(homeData));
    } else {
      // 优先读取localStorage中的缓存数据
      const cachedData = localStorage.getItem('homeData');
      if (cachedData) {
        setHomeData(JSON.parse(cachedData));
      }
    }
  }, [homeData]);

  return (
    <HomeDataContext.Provider value={homeData}>
      <Component {...pageProps} />
    </HomeDataContext.Provider>
  );
}

步骤2：修改首页组件，优先使用缓存数据 #

// pages/index.js
import { useContext, useEffect, useState } from 'react';
import { HomeDataContext } from './_app';

// 保留getStaticProps用于构建时生成初始数据
export async function getStaticProps() {
  const bigData = await fetchYourLargeData(); // 你的大量数据获取逻辑
  return {
    props: { initialHomeData: bigData },
    // 如果需要增量静态再生（ISR），可以保留revalidate，否则删除
    // revalidate: 3600,
  };
}

export default function Home() {
  const contextData = useContext(HomeDataContext);
  const [pageData, setPageData] = useState(contextData);

  useEffect(() => {
    // 优先使用上下文缓存的数据
    if (contextData) {
      setPageData(contextData);
    }
  }, [contextData]);

  if (!pageData) {
    return <div>加载中...</div>;
  }

  // 渲染你的首页内容
  return <div>{/* 使用pageData渲染 */}</div>;
}

这样一来，不管用户从哪个页面跳转到首页，都会直接使用缓存的数据，不会重新执行getStaticProps（除非缓存过期或你主动更新）。

方案3：将首页数据移到布局组件中获取 #

如果你的首页数据在整个应用中都可能用到，可以直接在根布局（_app.js）中获取一次，然后通过上下文传递给首页组件，彻底跳过首页的getStaticProps：

// pages/_app.js
import { createContext, useState, useEffect } from 'react';

export const HomeDataContext = createContext(null);

export default function MyApp({ Component, pageProps }) {
  const [homeData, setHomeData] = useState(null);

  useEffect(() => {
    // 只在客户端获取一次数据
    const fetchHomeData = async () => {
      if (!homeData) {
        const data = await fetchYourLargeData();
        setHomeData(data);
        // 存入localStorage做持久化缓存
        localStorage.setItem('homeData', JSON.stringify(data));
      }
    };

    // 先检查localStorage有没有缓存
    const cachedData = localStorage.getItem('homeData');
    if (cachedData) {
      setHomeData(JSON.parse(cachedData));
    } else {
      fetchHomeData();
    }
  }, [homeData]);

  return (
    <HomeDataContext.Provider value={homeData}>
      <Component {...pageProps} />
    </HomeDataContext.Provider>
  );
}

然后首页组件可以完全去掉getStaticProps，直接使用上下文数据：

// pages/index.js
import { useContext } from 'react';
import { HomeDataContext } from './_app';

export default function Home() {
  const homeData = useContext(HomeDataContext);

  if (!homeData) {
    return <div>加载中...</div>;
  }

  // 渲染首页内容
  return <div>{/* 使用homeData */}</div>;
}

这个方案适合数据不频繁更新的场景，能最大程度减少重复请求，提升跳转速度。

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