SWR

“SWR” という名前は、HTTP RFC 5861 (新しいタブで開きます)で普及した HTTP キャッシュ無効化戦略である stale-while-revalidate に由来します。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 はデータを返す任意の非同期関数にすることができ、ネイティブの fetch や Axios などのツールを使用できます。

このフックは、リクエストのステータスに基づいて、data、isLoading、error の 3 つの値を返します。

機能

わずか 1 行のコードで、プロジェクトのデータ取得ロジックを簡素化し、これらの素晴らしい機能をすべてすぐに利用できます。

• **高速**、**軽量**、**再利用可能**なデータ取得
• 組み込みの**キャッシュ**とリクエストの重複排除
• **リアルタイム**エクスペリエンス
• トランスポートとプロトコル非依存
• SSR / ISR / SSG サポート
• TypeScript 対応
• React Native

SWR は、より良いエクスペリエンスを構築するための速度、正確性、安定性のあらゆる側面をカバーしています

• 高速なページナビゲーション
• 一定間隔でのポーリング
• データ依存関係
• フォーカス時の再検証
• ネットワーク回復時の再検証
• ローカルミューテーション (楽観的 UI)
• スマートエラーリトライ
• ページネーションとスクロール位置の復元
• React Suspense

その他にもたくさんあります 詳細。

コミュニティ

SWR は、React フレームワークである Next.js (新しいタブで開きます) の背後にあるのと同じチームによって作成されました。今後のプロジェクトの更新については、Twitter で @vercel (新しいタブで開きます) をフォローしてください。

お気軽に GitHub でのディスカッション (新しいタブで開きます) にご参加ください！