如何解决您是否应该对具有任何动态内容的页面使用 next/link预取客户端转换?
来自:next/link
您可以看到 <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
时遇到的警告:
-
- 再次点击
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 分钟的空闲时间(这意味着他们将标签页保持打开状态)。每当他回来执行某些操作时,我都可以刷新整个网站以确保他们获得新版本的页面。
以前有人遇到过这个问题吗?
解决方法
我在几个论坛上发布了同样的问题,这是我得到的回复:
看来你的描述是对的。 next/link
在客户端缓存结果,除非重新加载整页,否则您的访问者不会立即获取重新验证的结果。
根据内容更改的可能性,您可能希望改用 <a>
,或者您可以查看一些客户端内容重新加载策略,该策略在装载和查询数据源以获取更新的内容后启动。
鉴于这一事实,我将坚持使用 next/link
和客户端转换。但我也会不时使用诸如 setInterval()
之类的东西来重新加载完整的网站,因此我确信我的用户最终会不断获得重新验证的页面。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。