现代化的数据请求,专为 React 打造

SWR 是一个极简的 API,内置缓存、重新验证和请求去重功能。只需一个 React Hook,即可让您的 UI 保持快速、一致且始终最新。

用一个 Hook 获取数据

向 useSWR 传递一个 key 和 fetcher。该 Hook 会管理请求、缓存响应并保持数据新鲜。您会获得 data、error 和 isLoading 来驱动您的 UI。

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

获取、请求和重新验证

SWR 在速度、正确性和稳定性等各个方面为您提供支持,帮助您构建更好的体验。

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

轻量且框架无关

小巧的 API 表面,支持任何数据源 — REST、GraphQL 或自定义 fetcher。

实时且具有弹性

自动后台重新验证、聚焦/重连更新,以及用于分页和流式传输的工具。

原生 React 人体工程学

为 Suspense 构建,与 SSR 和 SSG 兼容,从一开始就完全类型化。

开始使用 SWR 构建

开始使用