4

来自：下一个/链接

在此处输入图像描述

在此处输入图像描述

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

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

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

上面示例中的Latest页面使用getStaticPropswith 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. 在其他一些浏览器中，anadmin转到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

在此处输入图像描述

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

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

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

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

一个可能的解决方案

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

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

4

1 回答 1

0

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

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

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

鉴于这一事实，我将坚持使用next/link和客户端转换。但我也会setInterval()不时使用类似 a 的东西来重新加载完整的网站，所以我相信我的用户最终会继续获得重新验证的页面。

于 2021-06-05T17:23:51.087 回答