React 数据请求库 SWR 发布 1.0 正式版本

[shuding]

项目地址： 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 或留言！♥

[int64ago]

居然是 Vercel 大佬亲自来推广

[shuding]

@int64ago 最近社区翻译了博客和文档，就想着分享到中文站点 :D

[kxxoling]

同时在用 react-query 和 SWR，都挺好的。借地问个问题，因为要用到某些国内项目的奇葩的 SDK，在 SSR 环境保守折磨，有什么全局或者部分关闭 Next.js SSR 的办法吗？

[shuding]

@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

[kxxoling]

@shuding 我试试，之前因为是模块本身的问题，把第三方模块改成了 dynamic import 还是不行，dynamic import 页面组件倒是没考虑到。我试试这个思路。

[find456789]

请问大佬，swr 能完全替代 react-query 吗， swr 和 react-query 比起来，有啥优势吗

谢谢

[shuding]

@find456789 功能上能完全替代。

两个项目的设计思路不一样，SWR 注重使用体验以及性能、希望引入尽可能少的概念，保持极简和易用。RQ 则包含了很多几乎用不到的功能和概念，比如 “双向无穷加载”。两个库在大小上差了三倍多：SWR 4KB，RQ 12.3KB 。

另外最开始 RQ 抄袭了 SWR 的一些创新（比如 stale-while-revalidate 、focus revalidate 等等），值得指出但不影响用户选择。

[B3C933r4qRb1HyrL]

vercel 的产品真的很不戳

[shunia]

用过几次 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 的文档则是不够细，主体以小例子为主，少见介绍背后的原理或者原因，所以理解起来比较困难。

[shuding]

@shunia 多谢反馈！文档确实还有很多问题，很多地方只是用了例子，且没有详细解释概念。之后一定改进！