Next.js - 关于 dedupeInterval 和 refreshInterval 的 SWR hook 问题
Next.js - SWR hook question about dedupeInterval and refreshInterval
我第一次将 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,我会遇到性能问题吗?因为它在很短的时间内发出请求
如果你能帮我解决这个问题,那就太好了!
感谢您的宝贵时间!!
Now, what are the differences between these two ?
区别在于:
refreshInterval
正在定义一个时间,在该时间之后将发送新请求 以更新您的数据。例如。每秒。
dedupeInterval
正在定义一个时间,在此期间,如果已经为特定数据(即具有特定键的数据)发送了请求,则在呈现要求新请求以刷新该组件的组件时数据,刷新不会完成。
重复数据删除意味着消除重复项,即。提出可能更少的请求,而不是更多。他们为 an example in their documentation 提供了一个组件,该组件渲染了另一个名为 <Avatar />
的组件的 5 倍,该组件使用 swr 挂钩。但实际请求只会发出一次,因为该渲染将在默认的 2 秒时间跨度内。
If i have two request with the same key, it will update after two seconds ? Is it the same as refreshInterval ?
不会,dedupeInterval
设置为2秒不会自动更新数据。只有在 2 秒后重新呈现使用与 swr 挂钩相同的键的组件时,它才会更新它。或者,如果您没有停用焦点等其他更新机制,并且用户将焦点放在您的组件上。
在 refreshInterval
的情况下,只要组件仍处于挂载状态,每 X 时间就会有一个 API 调用,即使它没有重新呈现并且用户没有交互有了它。
If i use refreshInterval, would I have problems with performance ? Since it's making a request in very short periods of time.
是的,如果用户打开您的页面并在 20 秒内只阅读内容,并且您已将 refreshInterval
设置为 1 秒,则将有 20 API 次调用来更新它那段时间的数据。如果您的数据每隔几秒更改一次并且您需要使 UI 保持最新,则该行为可能很有用。但显然这可能是性能问题。
之所以默认禁用refreshInterval
而dedupeInterval
设置为2秒是为了避免API调用过多
我第一次将 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,我会遇到性能问题吗?因为它在很短的时间内发出请求
如果你能帮我解决这个问题,那就太好了!
感谢您的宝贵时间!!
Now, what are the differences between these two ?
区别在于:
refreshInterval
正在定义一个时间,在该时间之后将发送新请求 以更新您的数据。例如。每秒。dedupeInterval
正在定义一个时间,在此期间,如果已经为特定数据(即具有特定键的数据)发送了请求,则在呈现要求新请求以刷新该组件的组件时数据,刷新不会完成。
重复数据删除意味着消除重复项,即。提出可能更少的请求,而不是更多。他们为 an example in their documentation 提供了一个组件,该组件渲染了另一个名为 <Avatar />
的组件的 5 倍,该组件使用 swr 挂钩。但实际请求只会发出一次,因为该渲染将在默认的 2 秒时间跨度内。
If i have two request with the same key, it will update after two seconds ? Is it the same as refreshInterval ?
不会,dedupeInterval
设置为2秒不会自动更新数据。只有在 2 秒后重新呈现使用与 swr 挂钩相同的键的组件时,它才会更新它。或者,如果您没有停用焦点等其他更新机制,并且用户将焦点放在您的组件上。
在 refreshInterval
的情况下,只要组件仍处于挂载状态,每 X 时间就会有一个 API 调用,即使它没有重新呈现并且用户没有交互有了它。
If i use refreshInterval, would I have problems with performance ? Since it's making a request in very short periods of time.
是的,如果用户打开您的页面并在 20 秒内只阅读内容,并且您已将 refreshInterval
设置为 1 秒,则将有 20 API 次调用来更新它那段时间的数据。如果您的数据每隔几秒更改一次并且您需要使 UI 保持最新,则该行为可能很有用。但显然这可能是性能问题。
之所以默认禁用refreshInterval
而dedupeInterval
设置为2秒是为了避免API调用过多