SWRはVercelが2019年に公開した、Reactアプリ向けのデータ取得Hooksライブラリです。名称はキャッシュ戦略「Stale-While-Revalidate」の頭文字に由来し、「古いキャッシュをまず返し、裏で再検証して新しい値で更新する」という挙動をシンプルなAPIで実現します。Next.jsの開発元であるVercel製ということもあり、Next.jsアプリで採用される定番ライブラリの1つで、TanStack Queryと並ぶサーバ状態管理の有力選択肢として広く使われています。
この記事の目次
- useSWRと再検証戦略
- Vercelが2019年に発表
- Next.jsとの組み合わせ用途
- TanStack Queryとの違い
- まとめ
useSWRと再検証戦略
SWRの基本APIは、useSWR(key, fetcher) の1行で完結します。keyにはURLや配列など一意な識別子を、fetcherには非同期関数（fetchやaxiosのラッパなど）を渡すと、戻り値としてdata・error・isLoadingなどが返ってくる極めてシンプルな設計です。同じkeyへの呼び出しはキャッシュ共有され、複数コンポーネントから同じデータを参照しても通信は1回で済みます。
SWRが特徴的なのは、デフォルトで「フォーカス時再検証」「再接続時再検証」「定期再検証」が有効になっている点です。ユーザーがタブを離れて戻ってきたとき、ネットワークが切れて再接続したとき、自動で最新値を取りに行く挙動がオプションを書かずに得られます。オフラインキューイング、ページネーション、無限スクロール（useSWRInfinite）、楽観的更新もサポートされており、「最小APIで実用十分」というVercelらしい設計思想が貫かれています。
Vercelが2019年に発表
SWRはVercel社（旧ZEIT）が2019年に公開しました。Vercelは2015年にGuillermo Rauch氏が創業したクラウドプラットフォーム企業で、Next.jsの開発元としても知られます。SWRの設計は同社のフロントエンドエンジニア、Shu Ding氏らが中心となって進めており、Next.jsのドキュメントやサンプルでも頻繁に取り上げられるため、Next.jsを学ぶ過程で自然と触れる開発者が多くなりました。
2022年にはv2へバージョンアップし、Suspense統合、楽観的更新、Mutation APIの整理など機能面が大幅に強化されました。Next.js 13で登場したReact Server Components（RSC）の時代に入っても、「クライアント側のインタラクティブなデータ取得」を担うライブラリとして引き続き重要視されており、Vercel自身もSWRのメンテナンスを継続しています。競合のTanStack Queryと同じ「stale-while-revalidate」哲学を持ちつつ、軽量さで差別化している立ち位置です。
Next.jsとの組み合わせ用途
SWRが特に光るのは、Next.jsアプリで「クライアント側からAPI Routesやサーバアクションを呼ぶ」場面です。ログイン後のダッシュボード、ユーザープロフィールページ、設定画面など、ユーザー固有のデータをページ表示後に取得し、編集後すぐに反映させたい場面で、useSWRがそのまま使えます。fetcherを単純なfetchラッパにすればよく、Next.jsチュートリアルの中でも頻繁にこの構成が紹介されます。
リアルタイム性が必要なダッシュボードでは、refreshIntervalオプションを設定するだけで一定間隔のポーリングが実現できます。コメント欄、通知バッジ、株価表示などの「数秒〜数十秒で更新したい」UIに向いており、本格的なWebSocketを使うほどでもない場面で重宝されます。また、useSWRImmutableを使えば「一度取れば変わらない静的データ」を一切再フェッチしないキャッシュ動作にでき、Next.jsのルーティング切替時のチラつき防止にも有効です。
TanStack Queryとの違い
SWRとTanStack Queryは同じ「stale-while-revalidate」哲学を共有しますが、設計の優先順位が異なります。SWRはAPI面と実装サイズをできる限り小さく保ち、デフォルト挙動だけで多くの用途を賄うことを重視しています。そのため学習コストが極めて低く、Next.jsの公式チュートリアルでも自然に紹介できる軽さが特徴です。「データ取得Hookを1つだけ覚えれば多くの場面に対応できる」のがSWR選択の最大理由です。
一方、TanStack QueryはMutation API、楽観的更新、無限スクロール、DevToolsなど機能の厚みで勝ります。複雑なキャッシュ無効化戦略やオフライン耐性、複数フレームワーク対応が必要なプロダクトには、TanStack Queryの方が向いています。「Next.jsで軽くデータ取得したい」ならSWR、「中規模以上のSPAでキャッシュ戦略を緻密に管理したい」ならTanStack Query、という棲み分けが現実のプロジェクトで定着している構図です。
まとめ
SWRはVercelが2019年に公開した、Stale-While-Revalidate哲学のデータ取得Hooksライブラリです。APIのシンプルさとNext.jsとの親和性で人気を集め、軽量さを武器にTanStack Queryと並ぶサーバ状態管理の2大選択肢となっています。Next.jsを使う開発者なら最初に検討する価値があるライブラリです。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント