Zenn
🍱

SWRについて超簡単にまとめてみた

2024/01/24に公開
Next.js
React
frontend
SWR
tech

実務で使う機会があったので、超簡単にまとめてみました！

SWRとは

  • Next.jsを開発しているVercel社が提供するデータ取得のためのReact Hooksライブラリ
  • “SWR”は、HTTP キャッシュ無効化戦略である stale-while-revalidate に由来している
  • まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくる戦略

特徴

  • 速い、 軽量 そして 再利用可能 なデータの取得
  • 組み込みの キャッシュ とリクエストの重複排除
  • リアルタイム な体験
  • トランスポートとプロトコルにとらわれない
  • SSR / ISR / SSG support
  • TypeScript 対応
  • React Native
  • コードがシンプルに
    最も素晴らしいのは、 API に送られるリクエストがたった一つであること
    →同じ 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 フックは key 文字列と fetcher 関数を受け取る
  • key はデータの一意な識別子（通常は API の URL）で、fetcher に渡される
  • fetcher は key を受け取りデータを返す任意の非同期関数で、ネイティブの fetch や Axios のようなツールを使うことができる
    返り値は data として渡され、もし例外が投げられた場合は error としてキャッチされる
  • このフックは、リクエストの状態にもとづいて data と isLoading, error の三つの値を返している

isLoading と isValidating を組み合わせる

  • isValidating は実行中のリクエストがある場合に データがロード済みかどうかに関わらず true 
    → isValidating は実行中の再検証が存在する場合全て
  • isLoading は実行中のリクエストがあり ロード済みのデータがまだない場合 に true
    → isLoading は SWR が再検証中だけど表示するためのデータがない場合に使える

参考URL

Discussion