TL;DR

TanStack Query や SWR のようなデータ取得ライブラリは、難しいとされる Server State 管理を簡単にします。ユーザビリティやコンポーネント設計の品質も向上させます。導入する際にはいくつか注意する点があります。

（かなり長くなってしまったため、目次や目に留まった箇所だけ読むのも良いかと思います）

スコープ

この記事は Client Side Rendering(CSR) の SPA を対象とします。筆者（の業務）の関心や要求が少ないため、SSR や ISR はこの記事の議論では対象にしません[1]。読み込みパフォーマンスについても要求は控えめです。

利点や議論は特定の UI ライブラリ・フレームワークに限りませんが、筆者が慣れている React を使って説明します。

この記事では、React の State を以下の記事のように分類して考えています。

Local State: useState などで管理するような State
Global State: 複数のコンポーネントから利用されうる、もしくは、ページをまたいで利用される State。
- Client State: UI の状態など
- Server State: （すぐ下で説明）

Server State は、API サーバーからのレスポンスデータやそのキャッシュのことです。Redux や Recoil などの State 管理ライブラリで管理されたり後述のデータ取得ライブラリで管理されたりします。

後述するライブラリの説明でも出てくる概念です。Server State とは名前が違う場合もあります。

この記事では、リモートにあるものを単に「データ」とし、手元にあるものを「Server State」とします。それらをつなぐ必要がある点で、「Server State 管理」には「Server State」だけでなく「データ」の取得や更新も含みます。

Server State 管理の難しさは以下のとおりです[2]。