SWR

“SWR” 这个名字来自于 stale-while-revalidate。一种由 HTTP RFC 5861 推广的 HTTP 缓存失效策略。SWR 是一种策略，它首先从缓存中返回数据（过期的），然后发送 fetch 请求（重新验证），最后得到最新数据。

Overview(概览)#

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

该示例中中，useSWR hook 接受一个字符串 key 和一个函数 fetcher。key 是数据的唯一标识符（通常是 API URL），并传递给 fetcher。fetcher 可以是任何返回数据的异步函数，你可以使用原生的 fetch 或 Axios 之类的工具。

基于请求的状态，这个 hook 返回 2 个值：data 和 error。

Features(特性)#

仅需一行代码，你就可以简化项目中数据请求的逻辑，并立即拥有以下这些不可思议的特性：

• 面向 Jamstack
• 极速、轻量和可重用的数据请求
• 内置缓存和重复数据删除请求
• 实时体验
• 传输和协议不可知
• TypeScript ready
• React Native

SWR 涵盖了速度，正确性和稳定性的各个方面，以帮你建立更好的体验：

• 快速页面导航
• 间隔轮询
• 数据依赖
• 聚焦时重新验证
• 网络恢复时重新验证
• 本地更改 (Optimistic UI)
• 智能错误重试
• 分页和滚动位置恢复
• React Suspense
• ...

Community(社区)#

SWR 由 Next.js（React 框架）背后的同一团队创建。
在 Twitter 上关注 @vercel 未来项目更新

欢迎加入 GitHub 上的讨论！