Next.js 14.2.3+ ChunkLoadError求助：加载chunk 715失败

问题现象 #

使用 Next.js ^14.2.3 版本时，偶尔会触发客户端异常，提示「发生客户端异常（请查看浏览器控制台获取更多信息）」。该问题难以稳定复现，但多次刷新页面可能触发。控制台具体报错如下：

ChunkLoadError: Loading chunk 715 failed.(missing: /_next/static/chunks/715-98a54eede6c88c3f.js)

当前 Next.js 配置 #

const nextConfig = {
  output: "standalone",
  env: {
    title: "SiteTitle",
    description: "SiteDescription"
  },
  images: {
    remotePatterns: [{ hostname: "*" }],
  },
  poweredByHeader: false,
  reactStrictMode: false,
}

已尝试的解决方案（均无效） #

• 更换不同 Next.js 版本
• 移除 JS 文件缓存配置
• 添加如下 headers 缓存控制：

async headers() {
  return [
    {
      source: '/',
      headers: [
        {
          key: 'Cache-Control',
          value: 'no-store, no-cache, must-revalidate',
        },
      ],
    }
  ]
}

可能的解决方向 #

1. 覆盖静态 chunk 文件的缓存策略 #

之前的 headers 仅针对根路径，未覆盖静态 chunk 文件。修改配置让 chunk 文件使用强缓存，同时确保根路径获取最新路由映射：

async headers() {
  return [
    {
      source: '/_next/static/chunks/:path*',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        },
      ],
    },
    {
      source: '/',
      headers: [
        {
          key: 'Cache-Control',
          value: 'no-store, no-cache, must-revalidate',
        },
      ],
    }
  ]
}

immutable 标记会让浏览器永久缓存该 chunk，避免旧缓存导致的加载失败；根路径不缓存则确保每次进入都能拿到最新的 chunk 映射关系。

2. 检查独立构建的静态文件完整性 #

因为启用了 output: "standalone"，构建后需确认 .next/standalone/static/chunks 目录下的所有文件都完整部署到服务器，没有遗漏或损坏。部署时建议全量替换旧的静态资源，避免增量部署导致的文件缺失。

3. 调整 chunk 分割配置 #

尝试禁用部分 chunk 优化策略，减少分割异常的可能：

const nextConfig = {
  // 原有配置...
  experimental: {
    chunkSplitChunks: {
      chunks: 'all',
      cacheGroups: {
        default: false,
      },
    },
  },
}

4. 添加全局错误捕获与自动刷新 #

在根布局（layout.js）中添加错误监听，捕获 ChunkLoadError 后强制刷新页面，避免用户手动操作：

'use client';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    const handleError = (error) => {
      if (error.name === 'ChunkLoadError') {
        window.location.reload(true);
      }
    };

    window.addEventListener('error', handleError);
    return () => window.removeEventListener('error', handleError);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

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