Next.js配置revalidate:1的静态页面为何需两次F5刷新才显示新内容

• 核心是ISR内置的stale-while-revalidate机制：页面缓存过期后不会主动更新，必须收到用户请求才会触发重生成流程，且第一个请求会直接返回现有旧缓存内容，同时后台异步执行页面重生成，等新页面渲染完成后才会替换缓存，后续请求才能拿到更新后的内容。你遇到的需要两次刷新才显示新内容的情况就是这个机制导致的：
  1. router.push跳转时的请求是缓存过期后的第一个触发请求，此时后台已经开始重生成页面，但返回给前端的是旧内容
  2. 第一次F5刷新时，如果后台还没完成新页面的生成，仍然会返回旧缓存，等生成完成后第二次刷新才能拿到新内容
• router.push已经触发了服务端请求。你配置的revalidate:1只是标记缓存的过期时长，不是到点自动更新，必须有请求进来才会触发重生成逻辑，router.push的客户端路由请求已经触发了这个流程，只是返回的是旧内容。
• 换成window.location.href跳转也不能解决问题。不管是客户端路由跳转还是整页跳转，第一个请求的逻辑都是一致的：先返回旧缓存，后台触发重生成。除非你在跳转前已经确保后台完成了页面重生成，否则第一次打开还是旧内容。

最稳妥的方式是使用按需增量静态再生（On-Demand ISR），在保存文章完成后主动触发对应页面的缓存清除，等缓存清除完成后再跳转，就能保证用户跳转后直接看到最新内容，示例实现如下：

1. 先新增Next.js重生成接口

// pages/api/revalidate.ts
export default async function handler(req, res) {
  // 校验管理员权限，避免接口被滥用
  if (req.headers.authorization !== process.env.ADMIN_SECRET) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  const { slug } = req.body;
  try {
    await res.revalidate(`/post/${slug}`);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Revalidation failed');
  }
}

2. 调整文章保存逻辑

const savePost = async (post: BlogPost, router: NextRouter) => {
  await savePostAPI(post);
  // 调用按需重生成接口
  await fetch('/api/revalidate', {
    method: 'POST',
    headers: {
      'Authorization': process.env.NEXT_PUBLIC_ADMIN_SECRET,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ slug: post.slug })
  });
  const POST_ROUTE = `/post/${post.slug}`;
  router.push(POST_ROUTE);
};

如果暂时不想用按需重生成，也可以在跳转后调用router.refresh()主动拉取最新的服务端数据，或者跳转前增加1-2秒的等待时间，等后台重生成完成后再跳转，不过这种方式的稳定性不如按需重生成。

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