项目地址: 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 版本博客文章: 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 @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 @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 的文档则是不够细,主体以小例子为主,少见介绍背后的原理或者原因,所以理解起来比较困难。 |