如何快取 API 回應 + 網頁快取

你一定常常有這樣的經驗：在網站上按下返回鍵時，已經載入過的頁面會再次載入。

例如，在購物網站上點擊搜尋結果中的商品，然後按下返回鍵時

就會再次進行搜尋。

因為需要重新載入已載入的頁面，所以不僅使用者體驗不佳，系統上也存在更大的問題。

重新載入頁面會導致不必要的API呼叫，增加流量。

這可能會導致成本問題，如果該頁面正在收集數據，則還可能導致特定數據被過度收集的問題。

為了解決這個問題，快取頁面或API結果可以獲得很大的效果。

1. 利用瀏覽器儲存空間 (localStorage, SessionStorage, IndexedDB)

- localStorage即使關閉瀏覽器，數據也會保留。

- sessionStorage則在關閉瀏覽器或分頁後數據就會消失。

- IndexedDB用於儲存大量數據。可以非同步儲存，是非關聯式數據庫 (NoSql)。可以儲存圖片和影片。最大容量因瀏覽器而異，約為50MB左右。離線時也可以使用。

2. Axios Interceptor

如果使用axios，可以使用內建的攔截器功能。對於相同的請求，它會返回響應而不發送至伺服器。

在Nuxt框架中進行快取

將任何元件用keep-alive標籤包起來，就可以快取該元件。

可以設定在伺服器端渲染期間是否呼叫fetch()。如果設定為false，則只會在客戶端呼叫fetch。

也可以使用Vuex。原理與瀏覽器儲存空間相同。

可以使用網頁伺服器 (Nginx) 將快取設定放入回應標頭。

但是，由於快取的關係，資源（例如圖片）的發佈可能無法立即生效，此時需要使快取失效。可以更改檔名、發送使快取失效的請求，或者如果使用AWS CloudFront，則可以應用快取失效。

也可以將Nuxt伺服器渲染的頁面本身儲存在記憶體快取中。

這是伺服器端快取，不僅快取API，也快取整個頁面。也就是說，按下返回鍵時可以立即載入，效能非常出色，但因為使用伺服器記憶體，所以需要注意。

如果10,000名使用者請求相同的頁面，

第一個使用者請求時，頁面會被渲染並快取。

之後，其他9,999名使用者存取相同的頁面時，伺服器會回應快取的結果。

-> 但是，如果需要顯示依使用者個人化數據，則此方法不適用。

+ 快取內部使用lru-cache套件。

* lru：一種將最長時間未使用數據優先清除的快取演算法。

使用雜湊表或雙向連結串列數據結構快速查找鍵值對：O(1)時間複雜度