Next.js Server Component调用Route Handler时ISR数据重验证在生产环境失效

我太懂你这种本地跑的好好的，一上生产就掉链子的糟心了！ISR在本地能正常刷新数据，到生产环境就纹丝不动，哪怕等过了设置的revalidate时间刷新也没用，大概率是缓存策略没对齐或者生产环境的特殊配置导致的，咱们一步步来解决：

1. 先排查Route Handler的缓存配置（最常见的坑） #

生产环境下Next.js会默认对Route Handler的响应做强缓存，如果你的Route Handler没有显式设置缓存策略，哪怕Server Component的fetch里加了next.revalidate，也会因为Route Handler的旧响应被缓存而拿不到新数据。

你需要在/app/todo/route.js（或者你的Route Handler文件）里，显式配置和Server Component对应的重验证规则，两种方式选一个就行：

方式一：用Cache-Control响应头

import { NextResponse } from 'next/server';
// 你的DynamoDB数据获取逻辑
async function getTodoData() {
  // 替换成你实际的aws-sdk调用DynamoDB的代码
  return { id: Date.now().toString() }; // 示例用时间戳模拟动态数据
}

export async function GET() {
  const data = await getTodoData();
  // s-maxage设置为2秒，和Server Component的revalidate保持一致
  return NextResponse.json(data, {
    headers: {
      'Cache-Control': `s-maxage=2, stale-while-revalidate=30`,
    },
  });
}

方式二：用Next.js的revalidate静态参数

import { NextResponse } from 'next/server';

// 直接设置该Route Handler的重验证时间，和fetch里的保持一致
export const revalidate = 2;

async function getTodoData() {
  return { id: Date.now().toString() };
}

export async function GET() {
  const data = await getTodoData();
  return NextResponse.json(data);
}

2. 把fetch的绝对路径改成相对路径 #

你现在用的是process.env.API_BASE_URL + "/todo"这种绝对路径，生产环境如果环境变量配置有问题，或者网络层的CDN缓存了这个绝对路径的响应，都可能导致ISR失效。其实Server Component里调用同域的Route Handler，直接用相对路径就行，Next.js内部会直接调用逻辑，不走外部网络请求，更可靠：

export default async function Home() {
  // 直接用相对路径 /todo，不用环境变量拼接
  const res1 = await fetch("/todo", {
    next: {
      revalidate: 2,
    },
  });
  const { id: id1 } = await res1.json();

  // 其他逻辑...
  return (
    <div>
      <p>当前ID: {id1}</p>
    </div>
  );
}

3. 检查next.config.js的output配置（致命坑） #

如果你的next.config.js里设置了output: 'export'，那生产环境会导出成纯静态文件，完全不支持ISR（增量静态再生）的所有功能——本地开发服务器因为是动态运行的，所以没问题，但生产静态导出后，所有内容都是静态的，不会有后台重验证的逻辑。

打开你的next.config.js，如果有下面这种配置，直接删掉或者改成output: 'standalone'（生产环境推荐的独立部署模式）：

// 错误配置，会导致ISR失效
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // 删掉这行或者改成'standalone'
}

module.exports = nextConfig;

4. 生产环境测试的正确姿势 #

等你改完配置部署后，测试的时候注意：

• 不要用同一个浏览器窗口反复刷新，可能浏览器缓存了页面内容，用隐身模式或者不同浏览器测试
• 等待超过你设置的revalidate时间（比如2秒）后再刷新，ISR是后台增量更新的，第一个过期请求会触发后台生成，下一个请求才会拿到新数据（如果设置了stale-while-revalidate，用户会先拿到旧数据，后台悄悄更新，下一次刷新就能看到新内容）

备注：内容来源于stack exchange，提问作者Gianna