SWR

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

概要

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 の三つの値を返します。

特徴

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

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

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

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

And lot more.

コミュニティ

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

お気軽に GitHub のディスカッション (opens in a new tab) に参加してください！