追記: 2021年6月8日
SWR公式日本語訳ページが追加されたので、そちらをご覧ください
このページは SWR – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください
SWR
- データフェッチのための React Hooks ライブラリ
- 軽量
- バックエンド非依存
- リアルタイム
- Jamstack 志向
- TypeScript 対応
- 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 hook はkey文字列とfetcher関数を受け入れます。keyはデータの一意な識別子（通常はAPIのURL）であり、fetcherに渡されます。 fetcherは、データを返す任意の非同期関数にすることができ、ネイティブフェッチまたはAxiosなどのツールを使用できます。
Hook は、リクエストのステータスに基づいて、dataとerrorの2つの値を返します。
特徴
たった1行のコードで、プロジェクトでのデータフェッチのロジックを簡素化でき、これらすべての驚くべき機能をすぐに使用できます。
- Jamstack指向
- 高速、軽量、再利用可能なデータフェッチ
- 組み込みのキャッシュとリクエストの重複排除
- リアルタイム体験
- トランスポート・プロトコル非依存
- TypeScript 対応
- React Native
SWRは、速度、正確性、安定性のすべての側面をカバーして、より良い体験を構築するのに役立ちます。
- 高速なページナビゲーション
- ポーリング
- データの依存関係
- フォーカスでの再検証
- ネットワーク回復での再検証
- ローカルミューテーション（Optimistic UI）
- スマートなエラーの再試行
- ページネーションとスクロール位置の回復
- React Suspense
- ...
訳者追記
参考記事: ※ Optimistic UI とは
コミュニティ
SWRは、ReactフレームワークであるNext.jsと同じチームによって作成されます。
今後のプロジェクトの更新については、Twitterで@vercelをフォローしてください。
GitHubのディスカッションに気軽に参加してください！