AWS Amplify部署Next.js SSR应用时ISR不生效页面无法自动刷新

解决方案 #

1. 修正项目配置的输出目录
   你当前project-config.json里的DistributionDir设成了build，这是Next.js静态导出的输出路径，SSR/ISR场景下需要改为.next：

// 修正后的project-config.json
{
  "projectName": "monpoc",
  "version": "3.0",
  "frontend": "javascript",
  "javascript": {
    "framework": "react",
    "config": {
      "SourceDir": ".",
      "DistributionDir": ".next",
      "BuildCommand": "npm run build",
      "StartCommand": "npm run start"
    }
  },
  "providers": [
    "awscloudformation"
  ]
}

2. 清理getStaticProps的无效参数
   你当前代码里getStaticProps返回了未定义的page变量，会导致构建阶段隐式异常，删除该参数即可：

export async function getStaticProps(){
  return {
    props: {
      date:(new Date()).toString()
    },
    revalidate: 60
  }
}

3. 配置Amplify缓存规则
   进入AWS Amplify控制台，找到你的应用 -> 应用设置 -> 缓存规则，添加一条规则：

• 路径模式：/*
• 策略：自定义
• 浏览器缓存TTL：设为0
• CDN缓存TTL：设为60秒
• 新增自定义响应头：Cache-Control: s-maxage=60, stale-while-revalidate，让CDN遵守Next.js的ISR重验逻辑

4. 可选兜底配置
   如果以上配置后仍不生效，在Amplify控制台->环境变量中添加变量AMPLIFY_NEXTJS_EXPERIMENTAL_SSR_SUPPORT，值设为true。

所有配置修改完成后触发一次全量部署，部署完成后清除浏览器缓存即可测试ISR生效情况。

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