119 - 《手撕源码 10：swr（上）》
发布于 2022年5月22日
swr 取名字 stale-while-revalidate，一种 HTTP RFC 5861 里包含的缓存失效策略。这种策略会先用缓存的过期的数据，再发请求验证，最后得到最新数据。这种策略的好处是 UI 可以保持快速响应，因为会不断、自动地获取最新数据。
基本示例如下。
const { data, error } = useSWR(key, fetcher, config);
if (error) return <div>failed to load</div>;
if (!data) return <div>loading…</div>;
return <div>hello {data.name}!</div>
但是要注意的是，swr 是有适用场景，当数据是需要经常更新时才用。比如比赛实况、订单跟踪，可以 5s revalidate 一次；比如 Feed 类、粘贴簿、新闻，可以 30s-60s revalidate 一次；比如天气、新冠数据这类被动数据更新，用户通常会在背景页保留，不需要定期 revalidate，但用户 Focus Tab 或重新联网后需要 revalidate 一次；比如小块数据的更新像 YouTube 的订阅按钮、Github 的 Star 按钮，点了之后会希望看到自己对此的贡献，也要 revalidate。
而不适用的场景是数据不变化或很少变化的场景，这是用 swr 反而会造成网络阻塞和对于用户流量的不必要消耗。
swr 作者是 ShuDing，目前在 vercel，其他作品还有 til