SWRとReact Query：適切なツールの選択

SWR のサイズは gzip 圧縮時で約 7kb です。React Query v5 は gzip 圧縮時で約 13kb です。このサイズ差は、React Query にクエリのプリフェッチ、クエリのキャンセル、より詳細なクエリのライフサイクル、組み込みの DevTools などの追加機能があることを反映しています。

サイズが重視されるアプリケーションや、単純な取得・表示パターンでは、SWR の小さなフットプリントが大きな利点になります。

SWR の API はよりシンプルで、最小限に設計されています。主な要件がデータの取得と表示、および自動再検証であれば、SWR はごく少ないボイラープレートでこれをうまく実現できます。

SWR は Vercel によって開発されているため、Next.js との統合性が非常に高く、特に getServerSideProps や getStaticProps によるプリフェッチと、fallback data を使ったクライアント側の再検証を組み合わせる場合に適しています。

SWRConfig の fallback オプション、または useSWR の fallbackData オプションを使って、プリフェッチしたデータを SWR に渡します。SWR はこれを初期キャッシュ値として使うため、初回読み込み時の表示のちらつきをなくしながら、バックグラウンドで再検証できます。

このパターンは、Vercel を利用する Next.js Pages Router アプリケーションで推奨されるデータ取得方法です。

React Query では、クエリのライフサイクルをより細かく制御できます。staleTime、gcTime（ガベージコレクション）、refetchOnWindowFocus、retry 回数、retry delay はすべて個別に設定可能です。onSuccess、onError、onSettled コールバックを備えたミューテーションシステムも柔軟に利用できます。

React Query は AbortSignal によるクエリのキャンセルにも対応しており、入力中に検索結果を表示する UI に便利です。

React Query の useInfiniteQuery と getNextPageParam は、無限スクロールや追加読み込みのパターンに特化して設計されています。ページカーソルのロジックを管理し、フラットまたは構造化された pages オブジェクトを提供します。

SWR には同様の機能を提供する useSWRInfinite がありますが、やや低レベルな API で、ページの組み立てをより手動で行う必要があります。

React Query では、queryClient.prefetchQuery を使って、ホバー時やルート変更時にクエリをプリフェッチできます。コンポーネントがマウントされる前にデータがキャッシュに入るため、瞬時にレンダリングできます。

SWR には SSR の fallback data 以外に組み込みのプリフェッチ API がありません。ホバーを利用したプリフェッチには、React Query の方が適しています。

React Query v5 では、useQuery が isLoading ではなく isPending を返すように変更され、楽観的更新のパターンが統一され、TypeScript の型推論が改善されました。v5 の API は以前のバージョンよりもすっきりして、一貫性があります。

React Query を評価する場合は、v4 を学んでから移行するのではなく、最初から v5 を対象にしてください。

SWR は、デフォルト値のための SWRConfig を除いてプロバイダー設定を行わなくても、キーによってコンポーネント間でキャッシュエントリをグローバルに共有します。React Query では、QueryClient インスタンスを備えた QueryClientProvider が必要です。

迅速なプロトタイピングやシンプルなアプリでは、SWR の設定不要なグローバルキャッシュの方が短時間で導入できます。複雑なキャッシュ要件を持つ大規模アプリでは、React Query の明示的なクライアントの方が適しています。

アプリが主に Next.js で構築されている場合、データ取得のパターンが単純な場合（取得・表示・再検証）、バンドルサイズを最小限にしたい場合、またはチームが高度な機能より API のシンプルさを重視する場合は、SWR を選びます。

大規模な移行を行わずに、既存のコードベースへデータ取得ライブラリを段階的に導入したい場合にも、SWR は適しています。

無限スクロール、クエリのプリフェッチ、バックグラウンドでの再取得戦略、複数段階のクエリ依存関係、キャッシュ TTL の細かな制御など、複雑なサーバー状態管理が必要な場合は、React Query を選びます。

React Query には、より活発なミドルウェアと DevTools のエコシステムもあり、queryClient を単独でテストしやすいという利点があります。

一部のチームでは、リーフコンポーネントでの単純な単一リソースの取得には SWR を使い、プリフェッチを伴う複雑な複数クエリのページには React Query を使っています。これは一般的ではありませんが、チームが両方の API に習熟している場合には有効です。

より一般的には、コンテキストの切り替えや二重の依存関係による負担を避けるため、どちらか一方を選び、アプリケーション全体で一貫して適用します。

SWR と React Query のバンドルサイズは、おおよそどのように比較できますか？

SWR（約 7kb）はよりシンプルで、Next.js とネイティブに統合でき、ほとんどの取得・表示パターンを最小限のコードで実現できます。React Query（約 13kb）は、無限クエリ、プリフェッチ、細かなライフサイクルコールバック、クエリのキャンセルなど、より豊富な機能を提供します。

シンプルさや Next.js プロジェクトを重視する場合は SWR を、複雑なサーバー状態の要件がある場合は React Query を選びます。どちらも TypeScript、Suspense、SSR、オフラインパターンをサポートしています。