Skip to content


¥Automatic Revalidation


如果你想手动重新验证数据,查看 mutation

¥If you want to manually revalidate the data, check mutation.


¥Revalidate on Focus

当你重新聚焦页面或在选项卡之间切换时,SWR 会自动重新验证数据。

¥When you re-focus a page or switch between tabs, SWR automatically revalidates data.


¥This can be useful to immediately synchronize to the latest state. This is helpful for refreshing data in scenarios like stale mobile tabs, or laptops that went to sleep.

Video: using focus revalidation to automatically sync login state between pages.

该功能默认启用。你可以通过 revalidateOnFocus 选项禁用它。

¥This feature is enabled by default. You can disable it via the revalidateOnFocus option.


¥Revalidate on Interval


¥In many cases, data changes because of multiple devices, multiple users, multiple tabs. How can we over time update the data on screen?

SWR 将为你提供自动重新获取数据的选项。它很聪明,这意味着只有与钩子关联的组件在屏幕上时才会重新获取。

¥SWR will give you the option to automatically refetch data. It’s smart which means refetching will only happen if the component associated with the hook is on screen.

Video: when a user makes a change, both sessions will eventually render the same data.

你可以通过设置 refreshInterval 值来启用它:

¥You can enable it by setting a refreshInterval value:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

还有 refreshWhenHiddenrefreshWhenOffline 等选项。默认情况下,两者均处于禁用状态,因此当网页不在屏幕上或没有网络连接时,SWR 不会获取。

¥There're also options such as refreshWhenHidden and refreshWhenOffline. Both are disabled by default so SWR won't fetch when the webpage is not on screen, or there's no network connection.


¥Revalidate on Reconnect


¥It's useful to also revalidate when the user is back online. This scenario happens a lot when the user unlocks their computer, but the internet is not yet connected at the same moment.

为了确保数据始终是最新的,SWR 在网络恢复时自动重新验证。

¥To make sure the data is always up-to-date, SWR automatically revalidates when network recovers.

该功能默认启用。你可以通过 revalidateOnReconnect 选项禁用它。

¥This feature is enabled by default. You can disable it via the revalidateOnReconnect option.


¥Disable Automatic Revalidations


¥If the resource is immutable, that will never change if we revalidate again, we can disable all kinds of automatic revalidations for it.

从 1.0 版本开始,SWR 提供了一个辅助钩子 useSWRImmutable 来将资源标记为不可变:

¥Since version 1.0, SWR provides a helper hook useSWRImmutable to mark the resource as immutable:

import useSWRImmutable from 'swr/immutable'
// ...
useSWRImmutable(key, fetcher, options)

它具有与普通 useSWR 钩子相同的 API 接口。你还可以通过禁用以下重新验证选项来执行相同的操作:

¥It has the same API interface as the normal useSWR hook. You can also do the same thing by disabling the following revalidation options:

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
// equivalent to
useSWRImmutable(key, fetcher)

revalidateIfStale 控制 SWR 在安装且存在过时数据时是否应重新验证。

¥The revalidateIfStale controls if SWR should revalidate when it mounts and there is stale data.


¥These 2 hooks above do the exact same thing. Once the data is cached, they will never request it again.


¥Revalidate on Mount

在安装时强制覆盖 SWR 重新验证非常有用。默认情况下,revalidateOnMount 的值设置为未定义。

¥It's useful to force override SWR revalidation on mounting. By default, the value of revalidateOnMount is set to undefined.

SWR 钩子安装方式如下:

¥A SWR hook mounts as:

  • 首先它检查 revalidateOnMount 是否已定义。如果为真则开始请求,如果为假则停止。

    ¥First it checks if revalidateOnMount is defined. It starts request if it's true, stop if it's false.

revalidateIfStale 对于控制安装行为很有用。默认情况下 revalidateIfStale 设置为 true。

¥revalidateIfStale useful to control the mount behaviour. By default revalidateIfStale is set to true.

如果 revalidateIfStale 设置为 true,则仅在存在任何缓存数据时才重新获取,否则不会重新获取。

¥If revalidateIfStale is set to true it only refetches if there's any cache data else it will not refetch.