Skip to content

SWR

データ取得のための React Hooks ライブラリ

Lightweight

Backend Agnostic

Realtime

SSR / ISR / SSG Ready

Suspense

TypeScript Ready

Pagination

Remote + Local

“SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくるという戦略です。

SWR では、 コンポーネントはデータの更新を継続的かつ自動的に受け取ることができます。
そして、 UI は常に高速リアクティブなモノになります。

概要

import useSWR from 'swr'
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>
}

この例では、useSWR フックは key 文字列と fetcher 関数を受け取ります。 key はデータの一意な識別子(通常は API の URL)で、fetcher に渡されます。 fetcher はデータを返す任意の非同期関数で、ネイティブの fetch や Axios のようなツールを使うことができます。

このフックは、リクエストの状態にもとづいて dataerror の二つの値を返します。

特徴

たった 1 行のコードで、プロジェクト内のデータ取得のロジックを単純化し、さらにこれらの素晴らしい機能をすぐに利用できるようになります:

  • 速い軽量 そして 再利用可能 なデータの取得
  • 組み込みの キャッシュ とリクエストの重複排除
  • リアルタイム な体験
  • トランスポートとプロトコルにとらわれない
  • SSR / ISR / SSG support
  • TypeScript 対応
  • React Native

SWR は、スピード、正確性、安定性のすべての面をカバーし、より良い体験を構築するのに役立ちます:

  • 高速なページナビゲーション
  • 定期的にポーリングする
  • データの依存関係
  • フォーカス時の再検証
  • ネットワーク回復時の再検証
  • ローカルキャッシュの更新(Optimistic UI)
  • スマートなエラーの再試行
  • ページネーションとスクロールポジションの回復
  • React Suspense

And lot more.

コミュニティ

starsdownloadslicense

SWR は、React フレームワークである Next.js と同じチームによって作られています。 今後のプロジェクトのアップデートについては、Twitter で @vercel をフォローしてください。

お気軽に GitHub のディスカッション に参加してください!