swr缓存踩坑

1 阅读2分钟

问题描述

重命名成功了,但是切换tab回来后展示的名字还是之前的,但其实接口中已经是新的了

问题原因

重命名成功后,只通过 setListItems 更新了当前内存中的列表数据,但没有清除 SWR 缓存。当切换 tab 再切回来时,SWR 会从缓存(Memory + IndexedDB)中读取旧数据,旧数据里的 workName 还是重命名前的值,所以显示的是旧名字。

问题解决

需要在重命名成功后,清除相关的 SWR 缓存,这样切 tab 回来时就会重新请求最新数据。

swr实现

采用的是多层缓存服务 Memory + IndexedDB 解决【我的空间】页面有多个tab,用户切换的时候每次都要等接口返回,体验很差

Memory + IndexedDB 的话就是优先从本地缓存中展示旧数据,同时后台请求最新数据,实现零白屏切换。

Q: 为什么要分层?直接用 Memory 不行吗?

A: 因为 Memory 缓存页面刷新就丢了。我们的场景是用户可能刷新页面后再回到空间页,如果只有 Memory,每次刷新都要重新请求。所以加了 IndexedDB 作为 L2 持久层,刷新后仍能从 IDB 读到上次的数据先展示。但 IDB 是异步的,直接读会有延迟,所以 Memory 作为 L1 同步层,优先同步读取。两层配合:不刷新时 Memory 秒出,刷新后 IDB 兜底。"

踩坑经验

有一个实际踩过的坑就是:重命名操作成功后,我只更新了 React state 里的列表数据,但没有清除 SWR 缓存。用户切 Tab 再切回来时,SWR 从 IndexedDB 读到了旧数据,名字又变回去了。后来加了缓存失效逻辑才修复。这让我意识到 SWR 模式下,任何数据变更都必须同步处理缓存失效,否则 stale 数据会'幽灵复现'。