stale-while-revalidate

stale-while-revalidate 是 HTTP Headers 的 Cache-Control 設定。

使用方式會長這樣:

Cache-Control: max-age=1, stale-while-revalidate=59

• max-age : 是資料在快取中可以被視為有效的時間。在這個範例中超過 1 秒後，資料就會被視為過期。

• stale-while-revalidate : 當資料過期後，在指定的時間（此處為 59 秒）內仍然可以從快取中提供「過期的資料」，而同時在背景中重新取得最新的資料。

stale-while-revalidate 策略確保即使資料過期，使用者仍能立即獲得舊資料，而不會有資料正在更新的等待時間。60 秒後，快取的資料將完全過期，不再被使用。

Server State Management 的實作基於類似的概念，透過快取策略提升使用者體驗。

React Query 是怎麼運作的?

QueryClientProvider

QueryClientProvider 內部使用 useContext，來取得 QueryClient 物件，並將其傳入 children 中。而裡面的 defaultOptions 會給到 QueryCache 物件中，作為預設設定。

React Query 的快取存在哪裡?

React Query 的快取存儲在內部的 JavaScript 物件中，透過一個名為 QueryCache 的物件來管理快取，並將每個查詢的結果儲存在快取中。快取儲存的方式會類似這樣:

{
    ["users"]: {
         //... 其他資料
    },
     //...其他快取的資料
}

由於 React Query 使用 queryKey 來管理快取資料，所以每個查詢的 queryKey 的陣列必須是唯一的。否則可能會發生快取資料覆蓋的問題，導致資料不正確。

當頁面重新整理網站時，這些快取就會消失。如果想將快取存起來，可以放在 localStorage 或 IndexedDB 之類的地方。

React Query 怎麼和 React 溝通?

當你在元件中使用 useQuery 時，React Query 會產生一個 QueryObserver。QueryObserver 是一個監控查詢狀態的物件，負責在查詢結果更新時通知相關的元件重新渲染。當查詢結果改變時，QueryObserver 會觸發 React 元件重新渲染，確保畫面上的資料保持同步。

整個架構可以參考下圖:

參考資料和圖片來源:
https://web.dev/articles/stale-while-revalidate
https://tkdodo.eu/blog/inside-react-query
https://chihyang41.github.io/2020/11/14/react-query-and-swr-cache-strategy/
https://www.youtube.com/watch?v=YmrnPOgOvy4