请教一个大量 API 数据的前端缓存方案

2021-12-13 14:00:55 +08:00
 ryncv

背景是这样:公司一个后台系统,大概有四五个 API ,数据量都比较大( gzip 后大约还是有 3M )。数据内容相对稳定,不会很频繁的更新,大约一两周会更新维护一下。 如果每次访问页面都调用原始接口,会太慢,而且会占用很多下载带宽。因为一些原因,后台也没办法做成按需加载的,必须一次性全量返回。

现在方案是,第一次用户访问的时候,把接口数据全部存到 Localstorage 里面,刷新后检测到本地有数据就不请求服务器了,但是这样会存在缓存没法更新的问题,需要用户手动清理浏览器缓存。

求助一下有什么比较好的方案可以解决这个?

2796 次点击
所在节点    前端开发
29 条回复
Rush9999
2021-12-13 17:57:21 +08:00
luvsic
2021-12-13 18:16:30 +08:00
https://github.com/vercel/swr
缓存+刷新都有了
kekxv
2021-12-13 18:35:31 +08:00
用 jsonp 就行,时间不要用秒,用日或者自己设定想要的间隔
netnr
2021-12-13 19:16:24 +08:00
服务端把 json 写入文本,再打包 ZIP ,前端下载 ZIP 包解压读取文本解析 JSON
netnr
2021-12-13 19:19:24 +08:00
https://www.netnr.com/run/code/5328511666506473654

这有个大量数据导出的示例
IvanLi127
2021-12-13 19:27:49 +08:00
后端动得了的话,加个协商缓存的标头吧,不能啥活都前端揽下呐
maplelin
2021-12-13 20:54:51 +08:00
service-worker 可以根据条件缓存,至于更新你可以单独更新 service-worker 的注册版本就行了
KitAndrewLee
2021-12-13 21:54:31 +08:00
直接把文件写到 json 文件里面,然后上 CDN,接口请求的时候直接转发到 CDN 那边
kabob
2021-12-13 22:05:03 +08:00
service-worker 了解一下

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/821849

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX