Vercel製のSWRライブラリ「SWR」を調査してみる
SWRは、リモートデータフェッチ用のReactHooksライブラリ
「SWR」という名前はHTTPのstale-while-revalidateに由来していて、このキャッシュ戦略に影響を受けている
stale-while-revalidateについて以前調べた
uga-box.hatenablog.com
SWRは、Cache-controlで設定されたキャッシュの有効期限が切れた場合でも、stale-while-revalidateで指定した期間は古いデータを返し、その間に非同期でデータをフェッチしておくという仕組み
主な機能
- 一度取得したデータをkey valueの形でキャッシュする -ブラウザをクリックしたり、タブを移動して戻ってきたときにRevalidateする（データ取得とキャッシュ更新）
- エラー時のリトライができる
- pollingでデータをRevalidateできる
- mutationでデータ更新時にキャッシュも更新する
- ページ遷移後もスクロール位置を保存
実装例
import useSWR from 'swr'
const fetcher = () => fetch('/api/user')
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
