頁面緩存導致數據錯誤

服務端渲染(ssr)會將 API 數據做頁面元素返回給前端, 而瀏覽器會認為是靜態頁面并將頁面緩存, 導致每次訪問時都是緩存用戶數據. 頁面又包含對數據的處理并提交.
當多端更新時由于可能不是以最新數據修改提交就會出現數據相互覆蓋而出錯.

問題背景

作為一名互聯網的愛好者, 曾經收藏很多網址, 用過瀏覽器鏈接收藏功能, Google 賬號登錄不上(由于被墻), 導致鏈接無法同步. 多瀏覽器之間無法共享收藏, 也曾為轉門
寫一篇博客去分類記錄, 但太不方便使用, 接著也放棄了. 上網多年的收藏漸漸的散了. 于是決心自己實現一個鏈接收藏管理功能.

需求設計

鏈接頁管理頁做為首頁, 訪問簡單的域名便可 https://wxaxiaoyao.cn

提供系統默認鏈接和用戶自定義鏈接, 用戶自定義支持未登錄使用, 鏈接支持分類

多端編輯自動同步合并(需登錄)

頁面服務端渲染, 提升用戶體驗

需求分析

需求1略過, 需求2未登錄使用自定義功能, 可借助localStorage存儲實現, 需求3多端編輯可將數據存于后端DB, 數據合并其實遠程數據與本地緩存數據合并, 可借助更新時間
實現, 誰時間最新用誰的數據, 需求4前端框架使用nuxt解決

設計實現

數據結構設計

由于用戶收藏的鏈接數量是有限的, 且鏈接數據大小不大, 需求目的側重管理與檢索. 故直接使用 mysql 的json字段存貯, 無需拆分多表(拆分多表反而是表記錄劇增影響數據獲取). 大致 json 格式如下:

{classify: [ // 分類列表{ // 分類項name: "分類名",links: [{text: "鏈接名稱",url:"鏈接地址",tiemstamp: "更新時間戳" }]}] }

合并數據

合并數據偽代碼(由于本人英文水平較差, 變量命名可能比較糟糕, 努力改進中...), 直接復制的項目代碼, 重在表達邏輯實現:

mergePageData() {const indexPageData = this.indexPageData; // 緩存數據const selfPageData = this.selfPageData; // 遠程數據if (selfPageData.userId == undefined) { // 未認證 遠程數據為空this.selfPageData = indexPageData; // 用緩存數據替換遠程數據this.setIndexPageData(this.selfPageData); // 緩存最新遠程數據return ;};// 緩存數據屬于用戶且與當前認證用戶不同, 用最新的遠程數據替換緩存數據并緩存if (indexPageData.userId && indexPageData.userId != selfPageData.userId) return this.setIndexPageData(selfPageData);// 緩存數據不屬于用戶或屬于當前用戶則合并數據 原則將本地最新數據更新至遠程數據中_.each(indexPageData.classify || [], o => {const classify = _.find(selfPageData.classify || [], x => x.name == o.name); // 查找分類是否存在if (!classify) return selfPageData.push(o); // 不存在直接添加_.each(o.links || [], l => { // 存在合并鏈接const link = _.find(classify.links || [], x => x.text == l.text); // 查找鏈接項if (!link) return classify.links.push(l); // 不存在添加if ((link.timestamp || 0) <= (l.timestamp || 0)) { 遠程更新時間小于本地更新時間, 則更新鏈接項link.timestamp = l.timestamp;link.url = l.url;}});});this.setIndexPageData(selfPageData); // 刷新緩存 }

問題(bug)

回到本文開頭, 由于后端渲染導致瀏覽器緩存頁面數據, 從而緩存了用戶數據, 導致頁面增改刪鏈接項都是基于舊的遠程數據, 多端編輯提交時相互覆蓋出錯. 如何解決和規避此問題?
應該可以從如下兩種的方法解決:

禁止瀏覽器緩存頁面

設置禁止緩存頁面的響應頭, 此方法在頁面經過多層代理時可能會很麻煩

Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0

前端渲染時動態拉取用戶數據

若對于用戶自定義鏈接數據的SSR需求不是很強烈, 可以犧牲下做前端動態拉取渲染. 很可以保留 SSR 但還是得加客戶端動態拉取邏輯.

TODO

針對緩存問題是否存在其它解決方案? 數據結構設計是否合理?

轉載于:https://www.cnblogs.com/--xiaoyao--/p/11268944.html

總結

以上是生活随笔為你收集整理的页面缓存导致数据错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。