モダンなデータフェッチング、React 向けに構築

SWR は、組み込みキャッシュ、再検証、リクエストの重複排除を備えた最小限の API です。単一の React フックで、UI を高速で一貫性があり、常に最新の状態に保ちます。

1つのフックでデータを取得

キーとフェッチャーを useSWR に渡します。フックはリクエストを管理し、レスポンスをキャッシュし、データを最新の状態に保ちます。UI を駆動するために data、error、isLoading を取得できます。

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>
}

取得、リクエスト、そして再検証

SWR はスピード、正確性、安定性のあらゆる側面であなたをサポートし、より良い体験作りを助けます。

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

軽量でアグノスティック

任意のデータソース（REST、GraphQL、またはカスタムフェッチャー）をサポートする小さな API サーフェス。

リアルタイムで回復力がある

自動バックグラウンド再検証、フォーカス/再接続更新、ページネーションとストリーミングのユーティリティ。

ネイティブ React エルゴノミクス

Suspense 向けに構築され、SSR と SSG と互換性があり、最初から完全に型付けされています。

SWR で構築を始める

始める