如何配置NextJS使其在fetch请求时遵循Expires或cache-control头

如果你想让服务器通过Expires和Cache-Control头来决定缓存时长，而不是依赖NextJS的revalidate配置，得根据fetch的使用场景调整：

服务器组件场景 #

服务器组件里的fetch默认会解析服务器的缓存响应头，但如果你手动添加了revalidate参数或者修改了cache选项，就会覆盖服务器的设置。要让服务器主导缓存策略：

• 不要在fetch调用中设置revalidate参数
• 保持cache: 'force-cache'（这是服务器组件fetch的默认值，无需额外编写）
• 示例代码：

async function ProductList() {
  // 直接调用即可自动遵循服务器的缓存头
  const res = await fetch('https://api.yourdomain.com/products');
  const products = await res.json();
  return <div>{/* 渲染内容 */}</div>;
}

客户端组件场景 #

客户端组件的fetch由浏览器直接发起，NextJS不会干预缓存逻辑，浏览器本身就会遵守服务器返回的Cache-Control和Expires头。如果发现缓存未生效，先检查：

• 是否开启了浏览器调试工具里的「禁用缓存」选项
• 服务器返回的响应头格式是否正确（例如Cache-Control: public, max-age=1800）

API路由场景 #

在API路由中调用fetch时，需要显式指定cache: 'force-cache'，同时不要设置revalidate参数，这样NextJS会尊重服务器的缓存设置：

// app/api/orders/route.js
export async function GET() {
  const res = await fetch('https://api.yourdomain.com/orders', {
    cache: 'force-cache'
    // 不要添加revalidate配置
  });
  const orders = await res.json();
  return Response.json(orders);
}

额外注意点 #

• 如果服务器返回Cache-Control: no-cache或no-store，NextJS会直接跳过缓存，每次请求都直接访问服务器
• 不要在next.config.js中设置全局revalidate，否则会覆盖单个fetch的缓存策略
• 开发模式下NextJS默认禁用缓存，要验证生产环境的缓存效果，需执行next build && next start

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