追記: 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のディスカッションに気軽に参加してください！