SWR

名稱「SWR」源自於 stale-while-revalidate，一種由 HTTP RFC 5861 （在新分頁中開啟） 推廣的 HTTP 快取失效策略。SWR 是一種策略，首先從快取（過時）返回資料，然後發送獲取請求（重新驗證），最後取得最新的資料。

概述

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

在這個範例中，useSWR Hook 接受一個 key 字串和一個 fetcher 函數。key 是資料的唯一識別符號（通常是 API URL），將傳遞給 fetcher。fetcher 可以是任何返回資料的非同步函數，您可以使用原生 fetch 或像 Axios 這樣的工具。

這個 Hook 返回 3 個值：data、isLoading 和 error，取決於請求的狀態。

功能

只需一行程式碼，您就可以簡化專案中資料獲取的邏輯，並立即擁有所有這些令人驚豔的功能

• 快速、輕量 和 可重複使用 的資料獲取
• 內建 快取 和請求去重複
• 即時 體驗
• 不限傳輸方式和協定
• 支援 SSR / ISR / SSG
• 支援 TypeScript
• React Native

SWR 在速度、正確性和穩定性的各方面都為您考慮周到，以幫助您建立更好的體驗

• 快速頁面導覽
• 間隔輪詢
• 資料相依性
• 聚焦時重新驗證
• 網路恢復時重新驗證
• 本地變更（樂觀 UI）
• 智慧型錯誤重試
• 分頁和捲動位置恢復
• React Suspense

還有許多 更多。

社群

SWR 是由 Next.js （在新分頁中開啟）（React 框架）背後的同一個團隊所建立。請在 Twitter 上追蹤 @vercel （在新分頁中開啟） 以取得未來專案的更新。

歡迎加入 GitHub 上的討論 （在新分頁中開啟）！