Reactでデータフェッチやサーバー状態を扱うとき、よく名前が挙がるのが SWR と React Query（現TanStack Query） です。どちらも非同期データを簡単に扱える強力なライブラリですが、用途や設計思想に違いがあります。特に、Notionのようなリアルタイム編集型アプリを作る場合、どちらを選ぶべきかは開発体験を大きく左右します。
SWRとは
SWRはVercelが開発している軽量なデータ取得ライブラリで、「Stale-While-Revalidate（古いデータを表示しつつ、裏で新しいデータを取得する）」という戦略を採用しています。
特徴はとてもシンプルで、useSWR()フックでデータを取得すると、キャッシュ・再検証・再フェッチなどを自動で行ってくれます。Next.jsとの相性も非常に良く、表示専用のデータ取得には最適です。
例えばブログ記事やダッシュボードなど、「サーバー側のデータを読むだけで、頻繁に書き換えることはない」ケースでは、SWRの軽快さとシンプルさが魅力です。
React Query（TanStack Query）とは
React Queryは、データの取得だけでなく、更新・削除・エラーハンドリング・キャッシュ管理 まで一元的に扱える総合的なサーバー状態管理ライブラリです。
SWRが「データ取得の最適化」を目指すのに対して、React Queryは「サーバー状態全体の管理」を目的に設計されています。
特に、楽観的更新（Optimistic Update） や ミューテーション（Mutation） が強力で、ユーザー操作によって即座にUIを更新しつつ、バックエンドとの同期も安全に行えます。
また、エラー処理やリトライ設定、ローディング状態の管理など、実務的なユースケースに合わせた細かな制御が可能です。
Notionクローンではどちらが向いているか
Notionクローンのようなアプリでは、ユーザーが頻繁にノートを作成・編集・削除します。つまり「読み取り専用」ではなく、「サーバー状態の更新と同期」が頻発します。
この点で、React Queryが圧倒的に有利です。
SWRでも書き込み処理を実装することはできますが、キャッシュの手動更新や再フェッチの制御をすべて自分で行う必要があります。
React Queryなら、ミューテーションフックを使ってサーバー更新後にキャッシュを自動的に整合させることができるため、データの整合性を保ちながらスムーズなUIを実現できます。
一般的な使い分け
コミュニティでも次のような使い分けが一般的です。
- SWR：Next.jsサイト、ブログ、企業ページ、マーケティングサイトなど、「表示専用」の場面。
- React Query：CRUD操作が多いWebアプリ、ダッシュボード、タスク管理、SNS、Notionのようなコラボレーションツール。
まとめ
SWRは「軽量でシンプルにデータを取得したい」ケースに最適。
React Queryは「サーバーとのデータのやり取りをしっかり制御したい」アプリに向いています。
Notionクローンのように、データの読み書き・リアルタイム更新が多いアプリでは、React Queryを選ぶのが一般的です。
堅牢なキャッシュ制御やミューテーション管理が標準で備わっており、長期的にもメンテナンス性が高い選択と言えます。