问题标签 [link-prefetch]

来自：下一个/链接

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

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

• Home- 一些带有导航栏的登陆页面
• Latest- 在这里我可以看到我的最新帖子
• Admin- 在这里我可以添加更多帖子

上面示例中的Latest页面使用getStaticPropswith revalidate。就像是：

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

现在，看看我遇到的警告next/link：

• 1. 用户登陆Home页面。导航栏上有一个Link指向Latest。该链接prefetched将由next/link.
• 2. 在其他一些浏览器中，anadmin转到Admin页面并添加一个帖子（它应该Latest在某个时候出现在页面上）。
• 3. 现在用户点击Latest页面链接。新帖子不存在。
• 4. Home再次点击。并再次点击Latest。新职位仍然不存在，也永远不会存在。

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

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

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

更新

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

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

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

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

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

一个可能的解决方案

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

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

我已经使用预取了下一页的 html 文档

此外，我想像这样预取下一页的主图像

但问题是下一页主图像有srcset。因此它将根据视口加载图像。

那么是否有可能找到要加载的图像以便预取呢？

这可能不是一个咆哮的问题，而是与 HTML5 如何处理嵌入播放的文件有关。

无论如何，在预取音频文件时，一旦网络断开，这些缓存的音频就无法使用；结果，当我尝试通过调用 Howler 来播放它们时，它不起作用。

另一方面，如果我先调用 Howler 并让它进行缓存，那么即使离线，缓存的文件仍然可以播放。

这是为什么？

我使用<link rel="prefetch" href="path_to_file" />，它似乎正在工作，因为文件出现在网络监视器活动中。