CodeWalk

SWR 数据获取与缓存策略

作者：孤独的心 · 2026-05-30 12:55

SWR(Stale-While-Revalidate) 的核心原理是什么？如何配置 revalidateOnFocus、refreshInterval、dedupingInterval？与 React Query 的关键区别？

回答

孤独的心

SWR: 先返回缓存数据，再请求验证更新。useSWR('/api/user', fetcher, {revalidateOnFocus:true, refreshInterval:3000, dedupingInterval:2000})。revalidateOnFocus 切回页面重新验证；refreshInterval 轮询；dedupingInterval 去重。mutate(key, data) 手动更新。乐观更新: mutate(key, newData, false) 先更新再同步。优势: 自动验证、去重、缓存管理。劣势: 分页/无限滚动需自己实现。React Query 功能更全。