Next.js Fetch缓存上限问题：大请求未缓存引发重复API调用求助

一、突破2MB缓存上限，实现大请求缓存 #

Next.js内置fetch的2MB缓存限制针对的是其HTTP缓存层，要绕过这个限制可以采用以下方案：

1. 使用unstable_cache封装数据获取逻辑 #

Next.js提供的unstable_cache（v13+版本已广泛应用，后续会正式稳定）可基于文件系统或外部存储实现缓存，不受2MB限制。你可以将数据获取函数封装进去，在Server Components或API路由中均可使用：

import { unstable_cache } from 'next/cache';

const fetchLargeData = unstable_cache(
  async (id) => {
    const res = await fetch(`https://your-api.com/data/${id}`);
    return res.json();
  },
  ['large-data-cache'], // 缓存键前缀，用于区分不同缓存组
  { revalidate: 3600 } // 缓存有效期，单位为秒
);

// 在Server Components中调用
async function DataComponent({ params }) {
  const data = await fetchLargeData(params.id);
  return <div>{JSON.stringify(data)}</div>;
}

该方法默认将缓存内容存储在.next/cache目录，大体积数据也能正常缓存。

2. 接入外部缓存服务（如Redis） #

如果你的数据更新频繁或需要跨实例共享缓存，可以直接使用Redis等外部缓存服务：

import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

async function fetchLargeData(id) {
  // 优先查询Redis缓存
  const cachedData = await redis.get(`data:${id}`);
  if (cachedData) {
    return JSON.parse(cachedData);
  }
  // 缓存不存在时请求API
  const res = await fetch(`https://your-api.com/data/${id}`);
  const data = await res.json();
  // 将数据存入Redis并设置过期时间
  await redis.set(`data:${id}`, JSON.stringify(data), 'EX', 3600);
  return data;
}

这种方式完全脱离Next.js内置缓存的限制，适合超大规模数据的缓存场景。

二、解决Link预加载后的重复API调用问题 #

重复调用的核心原因是预加载的请求未被缓存（因数据体积超过2MB），导致组件挂载时不得不重新请求。解决上述缓存问题后，预加载的缓存会被自动复用，重复调用问题自然缓解。若仍有异常，可尝试以下优化：

1. 确保Server Components中数据获取的缓存生效 #

Next.js的Link预加载Server Components时，会在服务器端预执行数据获取逻辑。只要你的缓存策略生效（比如用了unstable_cache或Redis），客户端导航时会直接复用预加载的缓存数据，不会再次发起API请求。

2. 按需关闭预加载（兜底方案，不推荐） #

如果某些路由的预加载确实无必要，可以给Link组件添加prefetch={false}关闭预加载，避免不必要的请求：

<Link href={`/data/${id}`} prefetch={false}>
  查看详情
</Link>

该方法会牺牲导航体验，建议优先通过缓存方案解决问题。

关于更换请求方法的说明 #

换用axios等其他请求库本身无法解决缓存上限和重复调用问题，核心限制来自Next.js的缓存机制而非请求库。重点仍需调整缓存策略，上述两种缓存方案已能覆盖大部分场景。

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