您是否应该对包含任何动态内容的页面使用 next/link（预取客户端转换）？

Question

您可以看到 next/link 中的 <Link> 组件启用了 client-side 转换和 link prefetching，这是很棒的功能，但可能不适用于所有案例。

请参阅我运行的注意事项。假设我有以下页面：

Home - 一些带导航栏的着陆页
Latest - 在这里我可以看到我最新的 posts
Admin - 在这里我可以添加更多 posts

上例中的 Latest 页面使用 getStaticProps 和 revalidate。类似于：

export const getStaticProps : GetStaticProps<HomeRoute> = async () => {
  const preloadedState = await getPreloadedState();
  return({
    revalidate: 1,
    props: {
      preloadedState
    }
  });
};

理论上，1秒后，它应该为下一个请求发送最后一个陈旧的响应，并触发一个新的静态再生为后续请求服务。 1 秒后，该过程重复，您至少每秒都会获得新数据，这几乎是立即的。

现在，看看我运行对 next/link 的警告：

1. 用户登陆 Home 页面。导航栏上有一个 Link 指向 Latest。 link 将由 next/link 变为 prefetched。
1. 在其他一些浏览器中，admin 转到 Admin 页面并添加一个 post（它应该在某个时候出现在 Latest 页面上） .
1. 现在用户单击 Latest 页面 link。新的 post 没有。
1. 再次点击 Home。然后再次点击 Latest。新 post 还没有 而且永远不会有。

这种情况下的过渡非常快，这很好。但根据我目前的经验，我认为该用户被锁定在我网站的一个版本中，新的 post 将 永远不会 可用，因为第一个 prefetch 发生在新 post 不存在的时候。

用户看到新 post 的唯一方法是 he/she 按 F5 重新加载整个网站。并且可能需要刷新两次，因为第一次可能 return 之前的陈旧版本同时触发下一个的重新生成。

我的意思是，这个问题的解决方法是什么？我不应该对包含任何动态数据的页面使用 next/link 吗？我应该只使用普通的 <a> 标签吗？

更新

发件人：https://nextjs.org/docs/basic-features/data-fetching#statically-generates-both-html-and-json

从上面的摘录中，我们确实可以看出，client-side 转换不会触发页面重新生成，因为它们不会调用 getStaticProps。他们只获取页面的 pre-built JSON 对象以用作 props.

AFAIK，这意味着您将被锁定到您首次访问该网站时存在的页面版本。您可以来回切换，页面中的任何内容都不会改变，因为 JSON 数据可能无论如何都缓存在客户端上。

PS：我已经对此进行了测试（就像我在上面的问题中提到的那样），这正是发生的情况。

那么如何解决呢？我希望那些打开我的网站选项卡的用户在从一个页面导航到另一个页面时能够获得页面更新。

可能的解决方案

设置某种空闲时间计数器，如果用户有 10 分钟的空闲时间（这意味着他们让选项卡保持打开状态）。每当他回来并执行某些操作时，我都可以刷新整个网站以确保他们获得新版本的页面。

有没有人遇到过这个问题？

Answer 1

我在几个论坛上发布了同样的问题，这是我得到的回复：

It seems what you described is true. next/link caches results in the client-side and your visitor will not fetch a revalidated result out of the box unless there is a full-page reload.

Depending on the likelihood of content changes, you might want to use <a> instead or you can look at some client-side content reload strategy that kicks in after mount and query data source for updated content.

鉴于这一事实，我将坚持使用 next/link 和客户端转换。但我也会不时使用 setInterval() 之类的方法重新加载完整的网站，因此我确信我的用户最终会不断获得重新验证的页面。

您是否应该对包含任何动态内容的页面使用 next/link（预取客户端转换）？

Should you use next/link (prefetched client side transitions) for pages with any dynamic content?

next.js

link-prefetch

next-link