Next.js中ISR更新页面点击返回按钮回退至旧版本问题排查

原因分析 #

这是浏览器**后退/前进缓存（Back-Forward Cache，简称BF Cache）**导致的，和Next.js的ISR机制无关。当用户通过浏览器返回/前进按钮导航时，浏览器会直接从BF Cache中读取页面的完整快照（包括DOM、JS状态等），完全绕过网络请求，自然不会触发ISR的内容更新检查。而刷新页面时会发起全新的网络请求，这时才会拉取到ISR更新后的内容。

解决方案 #

方案1：监听页面可见性变化，主动更新内容（推荐） #

利用visibilitychange事件，当页面从BF Cache恢复并重新变为可见时，主动发起数据请求更新页面内容。这种方式既保留了BF Cache的性能优势，又能确保内容最新：

import { useEffect, useState } from 'react';
import { getSanityContent } from '../lib/sanity'; // 你的Sanity数据获取函数

export default function TargetPage() {
  const [pageContent, setPageContent] = useState(null);

  // 初始加载数据
  useEffect(() => {
    loadContent();
  }, []);

  // 监听页面可见性，从BF Cache恢复时重新拉取数据
  useEffect(() => {
    const handleVisibilityChange = async () => {
      if (document.visibilityState === 'visible') {
        await loadContent();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  const loadContent = async () => {
    const freshContent = await getSanityContent();
    setPageContent(freshContent);
  };

  return <div>{pageContent?.body}</div>;
}

方案2：禁用特定页面的BF Cache（谨慎使用） #

通过beforeunload事件监听，强制浏览器不缓存当前页面的BF Cache快照。这种方式会牺牲BF Cache的性能优势，仅适合对内容实时性要求极高的场景：

import { useEffect } from 'react';

export default function TargetPage() {
  useEffect(() => {
    const handleBeforeUnload = () => {
      // 触发浏览器放弃缓存当前页面快照
      window.history.replaceState(null, '', window.location.href);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // 页面内容...
}

方案3：调整缓存头策略（App Router适用） #

在App Router的页面中配置Cache-Control头，限制浏览器对页面资源的缓存时长，配合ISR的revalidate参数使用：

export const revalidate = 60; // ISR每60秒重新验证内容

export async function generateMetadata() {
  return {
    headers: {
      'Cache-Control': 'max-age=0, s-maxage=60, must-revalidate',
    },
  };
}

export default function TargetPage() {
  // 页面内容...
}

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