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> }