swr README

The project's README from github.com/vercel/swr. As one markdown file: README.md.

SWR


Introduction

SWR is a React Hooks library for data fetching.

The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.

With just one hook, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences:

...and a lot more.

With SWR, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive.

View full documentation and examples on swr.vercel.app.


Quick Start

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

In this example, the React Hook useSWR accepts a key and a fetcher function. The key is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously.

useSWR also returns 3 values: data, isLoading and error. When the request (fetcher) is not yet finished, data will be undefined and isLoading will be true. When we get a response, it sets data and error based on the result of fetcher, isLoading to false and rerenders the component.

Note that fetcher can be any asynchronous function, you can use your favourite data-fetching library to handle that part.

View full documentation and examples on swr.vercel.app.


Authors

This library is created by the team behind Next.js, with contributions from our community:

Contributors

Thanks to Ryan Chen for providing the awesome swr npm package name!


License

The MIT License.

swr (vercel/swr)

Searching Database…

32.5K ·GitHub
Swr
这是什么？SWR 是一个用于数据请求的 React Hooks 库。名字来自 stale-while-revalidate(HTTP RFC 5861):先显示缓存的数据，同时重新请求验证，拿到新数据后再更新界面。
它是我安装的库，还是托管的在线服务？是一个需要安装的库——本质上就是一个 React hook,叫 useSWR,直接放进你的组件里用就行。它快速、轻量，不绑定传输方式和协议，所以任何后端都能配合使用。
怎么把它加到我的 React 项目里？从 npm 安装 swr 包，然后调用 useSWR,传入一个 key(通常是你的 API 地址)和一个 fetcher 函数。它会返回 data、isLoading 和 error,完整文档在 swr.vercel.app。
需要配合 Axios 或其他数据请求库才能用吗？不需要——fetcher 可以是任何异步函数，所以直接用原生的 fetch 就够了。如果你已经在用喜欢的数据请求库，也可以直接接入。
我的应用必须是用 React 开发的才能用它吗？是的——SWR 是一个 React Hooks 库，专门为 React 项目打造，React Native 应用也可以用。
除了网页浏览器，它还能用在别的地方吗？可以——除了 Web 应用，它支持 iOS 和 Android 上的 React Native,也支持服务端渲染网站的 SSR 和 SSG,并且可以配合 React Suspense 使用。
用这个需要花钱吗？不需要——SWR 是基于 MIT 许可证的开源项目，可以免费使用。
数据会自动保持最新吗？会——组件会持续收到更新：SWR 会在窗口重新获得焦点时、网络恢复时自动重新验证，另外还支持轮询。
它能处理写入操作，还是只能读取？它支持配合乐观 UI 的本地数据变更——你可以在真正请求还在后台进行时，立即更新缓存中的数据。
请求失败了会怎样？这个 hook 会在返回 data 和 isLoading 的同时返回 error,而且 SWR 内置了智能的错误重试机制，失败的请求会自动重试。
SWR 是不是和 Next.js 或 Vercel 绑定的？它由 Vercel 上打造 Next.js 的团队开发，得益于对 SSR 和 SSG 的支持，它和 Next.js 应用搭配得很好——但它是一个独立的库，任何 React 项目(包括 React Native)都能用。
What are similar projects?query, usehooks, styled-components, react-i18next, nuqs, next.js, ai, astro
Which topics is it in?fetch, hook, ssg, cache, data, vercel, hooks, ssr, react-native, nextjs, react, npm
Creator
vercel
Size
8.1 MB
Stars
32.5K
Updated
CommitOct 16Releasev2.5.1Aug 12
Age
6y
Commits · 90 Days