『非同期データ管理』は TanStack Query 一択時代
サーバーステート管理は SWR/TanStack Query が標準化、本番採用で大幅に開発効率が改善します。本記事では編集部の視点で、実務での使い方を公開情報をもとに整理します。React パフォーマンス もご参考に。
主要な機能
(1) useQuery：データ取得＋キャッシュ。(2) useMutation：書込みと楽観的UI。(3) queryClient：グローバル制御。(4) 無限スクロール：useInfiniteQuery。(5) SSR/SSG対応。React/Vue/Solid/Svelte 全てで利用可能(公開情報をもとに)。
キャッシュ戦略
(1) staleTime：新鮮期間。(2) gcTime：ガーベジコレクション。(3) refetchOnWindowFocus：UI 復帰時に更新。(4) refetchInterval：定期更新。(5) queryKey 設計：キャッシュキーの考え方。
queryKey の設計
(1) 階層化：["users", { filters }]。(2) 変更時の自動再取得：依存変化で。(3) invalidateQueries：階層単位で無効化。(4) 命名規約：チーム標準化。(5) type-safe：z.infer や TypeScript で。
useMutation の使い方
(1) onSuccess/onError：副作用。(2) onMutate：楽観的更新。(3) onSettled：成功失敗共通。(4) retry：失敗時の再試行。(5) cache rollback：失敗時の戻し。GraphQL 実践 もご参考に。
SSR/SSG での扱い
(1) prefetchQuery：サーバー側で先取り。(2) dehydrate/hydrate：状態の引渡し。(3) Next.js App Router：Server Components 内で取得。(4) シリアライズ可能なデータに注意。(5) Bundle 最適化。Next.js App Router も合わせて。
無限スクロール
(1) useInfiniteQuery：cursor-based pagination。(2) getNextPageParam：次ページ判定。(3) IntersectionObserver連動。(4) 仮想化との組合せ：react-virtual。(5) キャッシュサイズ管理。
失敗しがちなパターン
(1) useEffect で fetch：旧スタイル。(2) queryKey の不安定：再生成で再フェッチ多発。(3) staleTime 0：常に更新で負荷増。(4) invalidate 過剰：パフォーマンス低下。(5) Suspense 連携の誤解。対策は、(1)useQuery 移行、(2)useMemo で固定、(3)staleTime 設定、(4)階層的invalidate、(5)公式パターン採用、です。