SWR 是什麼？
SWR 是由 Vercel 團隊開發的 React Hooks 函式庫，用來在 React 應用中「輕鬆抓資料」用的。
SWR 全名是：
Stale-While-Revalidate（舊資料優先，背景重新驗證）
這個概念來自 HTTP cache 策略，也就是說：先用快取舊資料馬上顯示，背景再偷偷去抓新資料更新畫面。這樣網頁就會感覺「又快又新」。
為什麼要用 SWR？
如果你曾經這樣寫過：
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []);
SWR 幫你把這段繁瑣的流程簡化成一行，還自動幫你處理很多細節：
| 傳統寫法要自己處理的 | SWR 幫你做了什麼 |
|---|---|
| 資料快取 | 自動快取 |
| 重新抓資料（revalidate） | 自動背景更新 |
| 重新整理頁面重新 fetch | 自動重新請求 |
| 多頁面共用同一筆資料 | 全局共享快取 |
| Loading / Error 狀態 | Hook 內建支援 |
安裝
npm install swr
# 或者
yarn add swr
基本用法範例
import useSWR from 'swr'
// 定義一個 fetcher：負責抓資料的函式
const fetcher = (url: string) => fetch(url).then(res => res.json())
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (isLoading) return <div>載入中...</div>
if (error) return <div>發生錯誤！</div>
return <div>你好，{data.name}</div>
}
小筆記：
-
useSWR(key, fetcher)：-
key：可以是 URL 或唯一 key（這個 key 會決定快取是否共用） -
fetcher：你自己定義怎麼去抓資料（可以用 fetch、axios、supabase...）
-
SWR 的自動更新行為
SWR 會自動幫你做這些事：
| 行為 | 預設 |
|---|---|
| 頁面重新聚焦時自動 re-fetch | 開啟 |
| 網路恢復連線時自動 re-fetch | 開啟 |
| 每隔一段時間自動重新抓資料 | 預設關閉（可開） |
如果你要手動設定自動更新：
useSWR('/api/data', fetcher, {
refreshInterval: 5000, // 每 5 秒更新一次
})
常見應用情境
-
用來載入使用者資料、商品清單、文章、API 查詢結果
-
搭配 Next.js Serverless API
-
快取重用（例如在多個元件中讀取同一筆資料）
進階功能（了解即可）
| 功能 | 說明 |
|---|---|
mutate | 手動更新快取資料 |
revalidate | 重新手動 fetch 資料 |
fallbackData | 預設資料（SSR 或預載用） |
swrConfig | 全局設定，例如 fetcher、錯誤重試次數等 |
和 React Query 比較
| 功能 | SWR | React Query |
|---|---|---|
| 語法簡潔性 | 更簡潔 | 稍複雜但彈性高 |
| 使用門檻 | 較低（新手適合） | 需要學更多設定 |
| 支援 Mutation | 需要搭配 mutate 手動寫 | 內建 mutation 支援 |
| 快取策略 | 輕量（針對 GET 為主） | 更完整（CRUD 都可） |
簡單需求建議用 SWR，複雜資料邏輯建議用 React Query
結論：什麼時候適合用 SWR？
-
你只是要簡單地抓 API 資料顯示出來
-
不需要太複雜的 CRUD 或 mutation 邏輯
-
想要「自動更新、快取」幫你省時間
-
正在用 Next.js / Vercel 的 React 專案