UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】VercelのSWRライブラリ

Vercel製のSWRライブラリ「SWR」を調査してみる

github.com

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

他参考

https://panda-program.com/posts/useswr

https://qiita.com/abyssparanoia/items/53c4c77e29c84b9977fd