Next.js部署新版本后，除两种方案外如何避免浏览器缓存？

除了你提到的设置缓存时间为0、通过API请求头传递版本值的方案外，针对Next.js框架，还可以通过以下方式避免浏览器缓存、确保用户获取最新前端内容：

• 依赖静态资源哈希命名（Next.js默认特性）
  Next.js会自动为JS、CSS、图片等静态资源生成基于内容的哈希后缀（如main.abc123.js）。当资源内容更新时，哈希值会同步变化，浏览器会将其识别为全新资源并发起请求，不会复用旧缓存。无需额外配置，默认构建流程即可实现，若使用CDN也不影响该机制生效。

• 配置页面与静态资源的差异化缓存策略
  在next.config.js中通过headers字段为不同类型资源设置针对性缓存规则：

  module.exports = {
    async headers() {
      return [
        {
          // 对HTML页面设置强缓存验证，每次请求都验证资源是否更新
          source: '/:path*',
          headers: [
            {
              key: 'Cache-Control',
              value: 'no-cache, no-store, must-revalidate',
            },
          ],
        },
        {
          // 对带哈希的静态资源设置长缓存（1年），因为哈希变化才会更新
          source: '/_next/static/:path*',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, max-age=31536000, immutable',
            },
          ],
        },
      ];
    },
  };
  

  同时，对于静态页面可结合增量静态再生（ISR），在getStaticProps中设置revalidate参数，让页面在后台自动更新，浏览器下次请求会获取最新内容：

  export async function getStaticProps() {
    const data = await fetchLatestData();
    return {
      props: { data },
      // 每60秒重新生成页面
      revalidate: 60,
    };
  }
  

• 客户端版本检测与主动刷新提示
  在public目录下创建version.json文件存储当前版本号：

  {
    "version": "v1.2.0"
  }
  

  然后在_app.js中添加版本检测逻辑，对比本地存储的版本与最新版本，不一致时提示用户刷新：

  import { useEffect } from 'react';
  
  function MyApp({ Component, pageProps }) {
    useEffect(() => {
      fetch('/version.json')
        .then(res => res.json())
        .then(({ version }) => {
          const storedVersion = localStorage.getItem('appVersion');
          if (storedVersion && storedVersion !== version) {
            if (confirm('检测到新版本，是否立即刷新获取更新？')) {
              localStorage.setItem('appVersion', version);
              window.location.reload(true);
            }
          } else {
            localStorage.setItem('appVersion', version);
          }
        });
    }, []);
  
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

  每次部署新版本时更新version.json的版本号即可。

• 借助Service Worker主动更新缓存
  使用next-pwa插件配置PWA功能，让Service Worker管理缓存并检测版本更新：

  1. 安装依赖：npm install next-pwa
  2. 在next.config.js中配置：

  const withPWA = require('next-pwa')({
    dest: 'public',
    register: true,
    skipWaiting: false, // 禁止自动激活新Service Worker，需用户确认后更新
  });
  
  module.exports = withPWA({
    // 其他Next.js配置项
  });
  

  3. 在_app.js中监听Service Worker更新事件，触发页面刷新：

  import { useEffect } from 'react';
  
  function MyApp({ Component, pageProps }) {
    useEffect(() => {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.addEventListener('controllerchange', () => {
          window.location.reload();
        });
      }
    }, []);
  
    return <Component {...pageProps} />;
  }
  
  export default MyApp;
  

  当部署新版本后，Service Worker会检测到更新，触发页面刷新以加载新资源。

• 版本化自定义静态资源路径
  对于public目录下未被Next.js自动添加哈希的特殊资源（如自定义配置文件），可手动在路径中加入版本标识，比如/v2/config.json。部署新版本时更新路径中的版本号，浏览器会将其视为新资源，不会复用旧缓存。

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