Next.js - 关于 dedupeInterval 和 refreshInterval 的 SWR 钩子问题

时间:2021-05-26 13:12:24

标签: reactjs next.js swr

我第一次将 SWR 钩子与 next.js 一起使用,我试图得到一些关于某些事情的答案,但我无法得到它们,即使是文档也不行。

问题:所以,我知道 SWR 为您的数据提供了一个缓存,并且它会实时更新,但是我在您必须使用钩子的两个选项之间迷失了方向。所以,通常情况下,你有 dedupeInterval 和 refreshInterval

refreshInterval = 0: polling interval (disabled by default)
dedupingInterval = 2000: dedupe requests with the same key in this time span

现在,这两者之间有什么区别?如果我有两个使用相同密钥的请求,它会在两秒钟后更新吗?它与 refreshInterval 相同吗?如果我使用 refreshInterval,我会遇到性能问题吗?因为它是在很短的时间内发出请求

如果你能帮我解决这个问题,那就太好了!

感谢您的时间!

1 个答案:

答案 0 :(得分:1)

<块引用>

现在,这两者之间有什么区别?

区别在于:

  • abcdefgh <- bits of input 00000abc <- bits of input >> amount defgh000 <- bits of input << (8 - amount) defghabc <- bits of result 定义了一个时间,在该时间之后,将发送新的请求以更新您的数据。例如。每一秒。
  • refreshInterval 定义了一个时间,在此期间,如果已经发送了针对特定数据(即具有特定键的数据)的请求,则在呈现请求新请求以刷新该数据的组件时,刷新不会完成。

重复数据删除意味着消除重复,即。提出可能更少的请求,而不是更多。他们为 an example in their documentation 提供了一个组件,该组件渲染了另一个使用 swr 钩子的名为 dedupeInterval 的组件的 5 倍。但实际请求只会发出一次,因为渲染将在默认的 2 秒时间跨度内。

<块引用>

如果我有两个使用相同密钥的请求,它会在两秒后更新吗?和 refreshInterval 一样吗?

否,<Avatar /> 设置为 2 秒不会自动更新数据。只有在 2 秒后重新渲染使用与 swr 钩子相同的密钥的组件时,它才会更新它。或者,如果您没有停用其他更新机制,例如焦点,并且用户将焦点放在您的组件上。

使用 dedupeInterval 时,只要组件仍处于挂载状态,即使组件未重新渲染且用户未与其交互,每 X 时间就会有一次 API 调用。

<块引用>

如果我使用refreshInterval,我的性能会有问题吗?因为它是在很短的时间内发出请求。

是的,如果用户打开您的页面并在 20 秒内只阅读内容,并且您已将 refreshInterval 设置为 1 秒,那么在此期间将有 20 次 API 调用来更新该数据。如果您的数据每隔几秒更改一次并且您需要更新 UI,则该行为可能很有用。但显然这可能是一个性能问题。

默认情况下禁用 refreshInterval 而将 refreshInterval 设置为 2 秒的原因是为了避免过多的 API 调用。