OSS探訪
GitHubで見るプロジェクトサイト

Reactのリモートデータ取得をキャッシュし、再検証と重複排除までHookで管理する

OSS規模スコア 282.6OSS健全度 96更新ペース 4 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
32,494
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/22
ページ内ナビ

概要

SWRは、React向けのデータ取得Hookライブラリです。stale-while-revalidateの考え方でキャッシュ済みデータを先に返し、その後に再検証して最新データへ更新します。キャッシュ、request重複排除、focus復帰時の再検証、polling、pagination、optimistic updateなどを同じ仕組みで扱えます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

cacheを先に返し、backgroundで再検証する

useSWRへrequestを識別するkeyと非同期fetcherを渡すと、cacheされた値を利用しながら必要に応じて再取得し、response到着後にcomponentを更新します。

出典：[2]

再検証・重複排除・mutationをdata fetching layerへまとめる

focus復帰、network recovery、polling、pagination、error retry、local mutationなど、画面ごとに重複しやすいdata fetching処理をHookとcache layerへ寄せられます。

出典：[2]

向いている用途

React画面でAPI dataのcacheと更新制御を共通化したい場合に向く

profile、dashboard、一覧・詳細画面など、同じremote dataを複数componentから参照し、loading・error・再取得を統一したいReact applicationに向きます。

出典：[2]

導入前の確認

keyとfetcherの責務を明確にする

SWR自体がAPI clientを固定するのではなく、fetcherはapplication側が用意します。keyはrequestの一意な識別子としてcacheにも使われるため、parameterを含むrequestでは同じdataを同じkeyで表せるよう設計します。

出典：[2]

stable版とmain branchの次期版を混同しない

最新安定版Releaseはv2.5.1ですが、確認時点のmain branch package metadataは2.6.0-beta.0です。productionでstable版を使う場合はversionを固定し、main branchの未安定APIを前提にしないようにします。

出典：[4][3][6]

参考にした公式資料

  1. [1]vercel/swr repository(2026-09-30)
  2. [2]SWR v2.5.1 README(2026-09-30)
  3. [3]SWR v2.5.1 package metadata(2026-09-30)
  4. [4]SWR v2.5.1 release(2026-09-30)
  5. [5]SWR MIT license(2026-09-30)
  6. [6]SWR main package metadata(2026-09-30)
編集部からの補足

同じAPI dataを複数画面で扱うとき、cacheと再取得条件をcomponentごとに書かずに揃えられるのが利点です。key設計がcache identityになるため、parameter付きrequestではkeyの一意性を先に決めておくと運用しやすくなります。

3ステップで試す

  1. 1

    SWR 2.5.1を追加

    最新安定版をversion固定でReact projectへ追加します。

    npm install swr@2.5.1
  2. 2

    fetcherを用意

    SWRはHTTP clientを固定しないため、keyを受け取ってPromiseを返すfetcherをapplication側で用意します。

    const fetcher = (url) => fetch(url).then((res) => res.json());
  3. 3

    useSWRでdataを取得

    import useSWR from 'swr'; の後でrequest keyとfetcherを渡し、data・loading・errorの状態を確認します。

    const { data, error, isLoading } = useSWR('/api/user', fetcher);
公式READMEで確認

成長

成長の推移 · 直近30日

32,494 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
4
Open PR
77

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • react
  • hook
  • data-fetching
  • swr
  • suspense
  • react-native
  • fetch
  • vercel
  • stale-while-revalidate
  • hooks
  • nextjs
  • data
Stars
32,494
Forks
1,384
Watchers
216
Open Issues
149
Contributors
198
所有者種別
Organization
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/22
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？
SWRとは？ReactのAPIデータ取得・キャッシュ・再検証をHookで管理する | OSS探訪