Next.js 13：如何解决网站会话后出现的JSON缓存异常问题

安全阿岳

2026-7-20

Next.js 13.3.0（App Router）部署AWS Amplify后，长时间返回标签页显示JSON内容的问题

环境信息

Next.js版本：^13.3.0
React版本：18.2.0
Next.js核心配置：

experimental: {
    appDir: true,
    isrMemoryCacheSize: 0,
}

部署环境：AWS Amplify，采用生产环境默认构建配置

问题描述

网站标签页打开一段时间（如1小时）或会话结束后返回时，页面会显示JSON内容，该问题在移动端和PC端Chrome浏览器均会出现。已尝试设置isrMemoryCacheSize: 0清除缓存，但问题仍存在。

解决方案

1. 调整AWS Amplify缓存策略

AWS Amplify默认CDN缓存规则可能误缓存动态路由的JSON响应：

进入Amplify控制台，找到目标应用，进入App settings > Hosting > Rewrites and redirects
添加或修改缓存规则：
- 路径匹配/*
- 缓存行为设置为CacheDisabled，或设置短TTL（如60秒）
- 确保响应头Content-Type强制为text/html，避免浏览器识别为JSON

2. 针对路由禁用ISR缓存

如果页面不需要增量静态再生（ISR），直接在对应路由组件中添加：

export const revalidate = 0; // 强制每次请求重新生成页面，禁用ISR缓存

优先针对出现问题的路由单独设置，避免全局禁用影响性能。

3. 检查App Router响应格式

排查服务器组件中是否存在错误返回JSON的情况：

确保generateMetadata、generateStaticParams等函数逻辑正常，未意外输出JSON内容
确认页面组件返回的是JSX结构，而非JSON对象

4. 强制浏览器不缓存页面

在根布局中添加缓存控制元标签，阻止浏览器缓存页面内容：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
      </head>
      <body>{children}</body>
    </html>
  );
}