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

编程问答 2022-04-29

问题描述

来自：next/link

enter image description here

enter image description here

您可以看到 <Link> 中的 next/link 组件启用了客户端转换和链接 prefetching，这些都是很棒的功能，但可能不适用于所有情况。

请查看我遇到的警告。假设我有以下页面：

上述示例中的 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。该链接将由 prefetched next/link。
    1. 在其他一些浏览器中，admin 会转到 Admin 页面并再添加一个帖子（该帖子应该会在某个时间出现在 Latest 页面上）。
    1. 现在用户点击 Latest 页面链接。新帖子没有。
    1. 再次点击 Home。然后再次点击 Latest。新帖子仍然没有并且永远不会出现。

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

用户看到新帖子的唯一方式是他/她按 F5 重新加载完整的网站。并且可能需要刷新两次，因为第一个可能会返回之前的陈旧版本，同时触发下一个的重新生成。

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

更新

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

enter image description here

从上面的摘录中，我们可以看到确实，客户端转换不会触发页面重新生成，因为它们不会调用 getStaticProps。它们仅获取页面的预构建 JSON 对象以用作 props。

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

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

那么如何解决这个问题呢？我希望那些在我的网站上保持打开标签的用户能够在从一个页面导航到另一个页面时获得这些页面的更新。

可能的解决方案

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

以前有人遇到过这个问题吗？

解决方法

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

看来你的描述是对的。 next/link 在客户端缓存结果，除非重新加载整页，否则您的访问者不会立即获取重新验证的结果。

根据内容更改的可能性，您可能希望改用 <a>，或者您可以查看一些客户端内容重新加载策略，该策略在装载和查询数据源以获取更新的内容后启动。

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

link-prefetchnext-link