SWR

“SWR” 这个名字源于 stale-while-revalidate，一种由 HTTP RFC 5861 (在新标签页中打开) 推广的 HTTP 缓存失效策略。SWR 是一种策略，首先从缓存中返回数据（陈旧），然后发送获取请求（重新验证），最后返回最新数据。

概述

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>
}

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

该 hook 返回 3 个值： data，isLoading 和 error，根据请求的状态。

功能

只需一行代码，您就可以简化项目中数据获取的逻辑，并开箱即用地获得所有这些惊人的功能

• 快速、轻量级且可重用的数据获取
• 内置缓存和请求去重
• 实时体验
• 传输和协议无关
• 支持 SSR / ISR / SSG
• 支持 TypeScript
• React Native

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

• 快速页面导航
• 按间隔轮询
• 数据依赖
• 在聚焦时重新验证
• 在网络恢复时重新验证
• 本地变异（乐观 UI）
• 智能错误重试
• 分页和滚动位置恢复
• React Suspense

以及更多 内容.

社区

SWR 由 Next.js (在新标签页中打开)（React 框架）的同一团队创建。关注 @vercel (在新标签页中打开) 的 Twitter 账号，了解未来项目的更新。

欢迎加入 GitHub 上的讨论 (在新标签页中打开)！