reactjs - Next.js - 关于 dedupeInterval 和 refreshInterval 的 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，我会遇到性能问题吗？因为它在很短的时间内发出请求

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

谢谢你的时间！！

标签： reactjsnext.jsswr

现在，这两者有什么区别？

不同之处在于：

refreshInterval正在定义一个时间，在该时间之后将发送新请求以更新您的数据。例如。每一秒。
dedupeInterval正在定义一个时间，在该时间期间，如果已经针对特定数据（即具有特定键的数据）发送了请求，则在呈现请求新请求以刷新该数据的组件时，将不会完成刷新。

去重意味着消除重复，即。发出可能更少的请求，而不是更多。他们在文档中给出了一个示例，其中一个组件渲染了另一个<Avatar />使用 swr 钩子的组件的 5 倍。但实际请求只会发出一次，因为该渲染将在默认的 2 秒时间跨度内。

如果我有两个具有相同密钥的请求，它会在两秒后更新吗？它与 refreshInterval 相同吗？

不，dedupeInterval设置为 2 秒不会自动更新数据。只有在 2 秒后重新渲染使用带有 swr 钩子的相同键的组件时，它才会更新它。或者，如果您没有停用其他更新机制，例如 on focus 并且用户将焦点放在您的组件上。

只要refreshInterval组件仍然挂载，即使它不重新渲染并且用户不与它交互，每隔 X 时间就会有一个 API 调用。

如果我使用 refreshInterval，我会遇到性能问题吗？因为它在很短的时间内发出请求。

是的，如果用户在 20 秒内打开您的页面并且除了阅读内容之外什么都不做，并且您已将时间设置refreshInterval为 1 秒，那么在此期间将有 20 次 API 调用来更新该数据。如果您的数据每隔几秒钟更改一次并且您需要更新 UI，那么这种行为可能会很有用。但显然这可能是一个性能问题。

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