SWR:具有快取功能的遠端資料請求 React Hook 程式庫

現在的網頁應用程式都會架構成前端與後端,然後中間透過 Restful API 或是 GraphQL 來做遠端的資料請求

但是重複的資料一再對遠端服務做請求,一來沒效率,二來現在有些後端採用 Serverless 或是以 API 呼叫次數為計費,前端能盡量減少遠端 API 呼叫,除了能增加前端的反應速度,也可以減少後端的開銷

RFC 5861 - HTTP Cache-Control Extensions for Stale Content 就定義了這個需求,但是 RFC 5861 並不是網路的標準,僅供參考

今天要介紹的 React Hook 程式庫 – SWR ( stale-while-revalidate ) ,即是根據這份 RFC 5861 實現了這個快取功能,透過 SWR 對遠端做資料請求,會先查詢本地端的快取( Cache ),如果快取沒有對應的資料才會從遠端請求,這讓網頁前端的反應更快,可以讓使用者體驗更好

專案功能特色

  • 傳輸和通訊協議不可知資料獲取 – fetch function 是由你來定義,或是用第三方程式庫
  • 快速頁面瀏覽
  • 重新確認關注點 ( Revalidation on focus ) - 當視窗取得 focus 的時候
  • 間隔輪詢 – 所以可用 idle 的時間定期更新 cache
  • 局部修改 (Local mutation )
  • 分頁
  • 支援 TypeScript
  • Suspense mode – 請參考 React Suspense mode
  • Minimal API

專案網址

相關資訊

相關線上課程

Soft & Share 訂閱會員加值服務

找線上課程?試看看 Soft & Share 網站搜尋引擎

✍ 搜尋結果太多?可參考 Soft & Share 搜尋引擎使用技巧


幫我們個小忙!

使用 e-mail 追蹤 Soft & Share

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: