javascript - Next.js 正在执行两次完整的 F5 刷新操作以在静态页面上显示新内容 `revalidate: 1` ？我期待一个

Question

我的 Next.js 项目上有一个博文编辑页面。

我的帖子页面正在使用 Incremental Static Regeneration具有 revalidate: 1 的功能第二个(目前用于测试)。我稍后会使用类似 revalidate: 300 的东西(5 分钟)。

要更新帖子，这就是我所做的:

作为管理员，我访问了/admin/post/edit/my-post-slug ，更改我需要的任何内容并保存。

保存后，我正在做一个 route.push到帖子页面，在/post/my-post-slug看到新版本.

代码如下:

const savePost = async (post: BlogPost, router: NextRouter) => {
  await savePostAPI(post);
  cons POST_ROUTE = "/post/my-post-slug";
  router.push(POST_ROUTE);
};

一切都按预期工作，但有一个小警告。

这是我得到的流程:

- I'M ON ADMIN POST EDIT PAGE AND I SAVE
- I GO TO POST PAGE VIA router.push() AND I SEE THE OLD CONTENT (THIS IS EXPECTED)
- WAIT A LITLE
- I HIT REFRESH (F5) ONCE AND I RELOAD THE PAGE AND STILL SEE OLD CONTENT (NOT EXPECTED)
- WAIT A LITLE
- I HIT REFRESH (F5) AGAIN AND SEE THE NEW CONTENT

我可以在 router.push() 之后看到旧内容. Next.js 应该在重新生成新版本之前始终提供缓存的内容，即使是陈旧的内容。但是为什么我在按下F5之后没有立即看到新内容呢？首次？为什么我需要刷新两次才能看到新内容？没有 router.push触发一个新的服务器请求并让服务器知道它应该重新生成页面(考虑到这显然是陈旧的事实，因为 revalidate:1 将在 1 秒后使其陈旧)？为什么会这样？

而不是使用 router.push()我应该只使用 window.location.href = "https://www.example.com/post/my-post-slug" 吗？以确保我会发送触发页面重新生成的请求？

Answer 1

经过进一步调查，我可以确认。

router.push() 实现客户端转换，并且不会触发新的 getStaticProps 调用。它只获取一个带有先前生成的页面 props 的 JSON 对象。

即:这意味着无论您如何执行我的客户端转换，该页面都不会重新生效。

要么使用客户端 代码获取新数据，要么不时地重新加载整个页面。至少需要 2 个。第一个将返回 stale 数据并将触发重新验证过程。第二个将获得新数据。