这是一个创建于 1170 天前的主题，其中的信息可能已经有所发展或是发生改变。
项目地址： https://github.com/vercel/swr
中文文档： https://swr.vercel.app/zh-CN
SWR 是一个轻量且便捷的 React hook 数据请求库，基础功能仅一行代码：
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>
}
自带了请求去重、错误重试、缓存、轮询、分页、页面聚焦自动重载、服务端渲染（ SSR/SSG ）、Suspense 、React Native 支持 等等功能。
1.0 版本变化
-
更轻量：在没有删除任何现有功能的前提下，
- 核心减小 41%（压缩后为 24%，3.9 kB ）
- 安装包减小 52%
- 改进 tree-shaking
- 支持预加载的数据作为 fallback：对于服务端渲染、静态渲染等场景有更好的支持
- 支持 immutable 模式：可定义数据为 immutable，不重复请求
- 中间件（ middleware ）支持：多种场景扩展（示例）
- 自定义缓存提供层：持久化、离线、测试等场景（文档）
详情请阅读 1.0 版本博客文章： https://swr.vercel.app/zh-CN/blog/swr-v1
后续版本计划
[email protected]测试版本已发布，加入了 自动序列化缓存 key 的功能，欢迎尝试- 未来版本考虑中的功能：
useSWRMutation与useSWRSubscription
欢迎给 SWR 提供贡献和建议： https://github.com/vercel/swr 或留言！♥
 |
1
int64ago 2021-09-17 23:16:39 +08:00
居然是 Vercel 大佬亲自来推广
|
 |
3
kxxoling 2021-09-17 23:52:38 +08:00
同时在用 react-query 和 SWR，都挺好的。借地问个问题，因为要用到某些国内项目的奇葩的 SDK，在 SSR 环境保守折磨，有什么全局或者部分关闭 Next.js SSR 的办法吗？
|
 |
4
shuding OP  1
@kxxoling 可以实现在一个新的页面组件里面，然后用 `dynamic` 的 `{ ssr: false }` 选项引入：
```js // pages/index.js const DynamicComponentWithNoSSR = dynamic( () => import('../components/no-ssr-page'), { ssr: false } ) export default Page () { return <DynamicComponentWithNoSSR/> } ``` 把原本的实现都放进 `components/no-ssr-page`，就不会被 SSR 影响到。 https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr |
|
5
kxxoling 2021-09-18 00:42:44 +08:00
@shuding 我试试，之前因为是模块本身的问题，把第三方模块改成了 dynamic import 还是不行，dynamic import 页面组件倒是没考虑到。我试试这个思路。
|
 |
6
find456789 2021-09-18 01:03:14 +08:00
请问大佬，swr 能完全替代 react-query 吗， swr 和 react-query 比起来，有啥优势吗
谢谢 |
|
7
shuding OP 2
@find456789 功能上能完全替代。
两个项目的设计思路不一样，SWR 注重使用体验以及性能、希望引入尽可能少的概念，保持极简和易用。RQ 则包含了很多几乎用不到的功能和概念，比如 “双向无穷加载”。两个库在大小上差了三倍多：SWR 4KB，RQ 12.3KB 。 另外最开始 RQ 抄袭了 SWR 的一些创新（比如 stale-while-revalidate 、focus revalidate 等等），值得指出但不影响用户选择。 |
 |
8
B3C933r4qRb1HyrL 2021-09-18 09:51:11 +08:00 1
vercel 的产品真的很不戳
|
 |
9
shunia 2021-09-18 10:51:10 +08:00 1
用过几次 react-query，见过 swr 很多次但是没有使用过。
刚刚去仔细看了一下 swr 的文档，看起来在用法上比 react-query 稍微轻巧一些，比如 react-query 的 {enable} 选项，在 swr 实现的很自然。 但是不知道是不是我的问题，感觉 swr 的中文文档不太好理解，比如： “条件数据请求”里解释 key 不变会导致即使 token 变化也会返回脏数据，这一部分的解释看的我挺懵的，继续往下看并且结合曾在 react-query 中看到过的解释才理解，原来是因为 hook 的第一个参数整体被当做一个 key，来处理了缓存相关的功能，所以 fetcher 里面的逻辑在 key 不变的情况下可能根本不会被触发。 另外对于“传入参数”这部分文档，我感觉最顶上的“等价”部分反而会导致理解混淆：当我看到等价的时候，下意识的觉得“既然等价那就都可以咯？”，但是其实这部分文档更重要的是说明 hook 第一个参数的整体性。即当你需要可变参数时，不要在 fetcher 方法里直接引用，而是使用 hook 的第一个参数，利用数组进行传参，从而实现当数组数据变化时，引发 key （ swr 概念中的） 变化，进而触发 swr 进行重新计算和验证。这个概念其实就是主流框架本身的概念，还是挺好理解的。但是因为没有解释，不容易触发联想。而且还有最上面的文档来混淆。。。 我个人感觉的话，其实 react-query 的文档也比较让人头大，因为他虽然每个概念解释的很细，但是不太具有关联性，需要自己在使用中串联起来。swr 的文档则是不够细，主体以小例子为主，少见介绍背后的原理或者原因，所以理解起来比较困难。 |
Select Language