React迁移至Next.js并切换Vercel后缓存问题解决求助

核心问题分析 #

你当前添加的缓存头仅作用于单个API路由，但用户看到旧版本的核心原因是静态页面、JS/CSS资源的浏览器/CDN缓存未更新，需要从全局缓存配置、客户端强制刷新、CDN缓存清理三个维度解决。

1. 全局配置Next.js缓存策略（覆盖页面与静态资源） #

修改next.config.js，通过headers字段为页面、静态资源设置精准的缓存规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      // 针对HTML页面：禁止CDN和浏览器缓存，确保每次请求拉取最新版本
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
          },
          {
            key: 'Vercel-CDN-Cache-Control',
            value: 'no-cache',
          },
        ],
      },
      // 针对静态资源（带哈希的JS/CSS/图片）：可以长期缓存，因为哈希随版本变更
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

• 页面设置no-store确保浏览器和CDN不缓存；静态资源利用哈希特性设长缓存，避免无效请求。

2. 客户端强制版本检测与刷新 #

在_app.js/_app.tsx中添加版本校验逻辑，主动提示用户刷新：

1. 在public目录下创建version.json：

{
  "version": "1.0.1"
}

2. 在_app.tsx中加入检测逻辑：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const checkForUpdate = async () => {
      try {
        const res = await fetch('/version.json', { cache: 'no-store' });
        const { version } = await res.json();
        const storedVersion = localStorage.getItem('app_version');

        if (storedVersion && storedVersion !== version) {
          if (confirm('网站已更新，请刷新页面获取最新版本')) {
            localStorage.setItem('app_version', version);
            window.location.reload(true);
          }
        } else if (!storedVersion) {
          localStorage.setItem('app_version', version);
        }
      } catch (err) {
        console.error('版本检测失败:', err);
      }
    };

    checkForUpdate();
    // 可选：定时检测，比如每30分钟
    const interval = setInterval(checkForUpdate, 30 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

• 每次页面加载时拉取最新版本号，与本地存储对比，不一致则提示用户刷新。

3. 修复重定向并清除Vercel CDN缓存 #

重定向配置（替代代码内重定向）

在项目根目录创建vercel.json，配置域名跳转并禁用缓存：

{
  "redirects": [
    {
      "source": "/(.*)",
      "destination": "https://www.domain.com/$1",
      "permanent": true,
      "headers": {
        "Cache-Control": "no-store"
      }
    }
  ]
}

• 用permanent: true设置301永久重定向，同时添加Cache-Control: no-store避免重定向规则被缓存。
• 也可以直接在Vercel控制台的「Domains」页面，将主域名设置为www.domain.com的别名，由平台自动处理跳转。

手动清除Vercel CDN缓存

1. 登录Vercel控制台，进入对应项目
2. 点击「Settings」→「Domains」
3. 找到目标域名，点击「Clear Cache」按钮

• 这会强制Vercel CDN刷新所有缓存内容，新请求将拉取最新版本。

4. 针对已缓存旧资源的兜底方案 #

如果部分用户仍加载旧资源，可以在Vercel项目的「Edge Functions」中添加全局中间件，强制浏览器刷新：
创建middleware.ts：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  // 强制浏览器不缓存页面
  response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate');
  return response;
}

export const config = {
  matcher: '/:path*',
};

• 中间件会作用于所有请求，确保响应头覆盖旧缓存规则。

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