UIステートとサーバーステートを区別する理由は何か？

Question

Accepted Answer

**UIステート**は、アプリが所有し、ローカルで制御するデータです（トグル、フォーム入力、選択されたタブ）。**サーバーステート**はサーバー上に存在し、クライアント上に*キャッシュ*されているだけのデータです（取得したユーザー、製品、投稿）。これらは根本的に異なる特性を持ち、異なるツールを必要とします。

## 主な違い

```text
                  UI state                    Server state
Ownership         you own it (client)         the server owns it; client caches
Freshness         always current              can become STALE (server changed it)
Sync needed?      no                          yes — refetch, invalidate, revalidate
Shared?           usually one client          shared across users/devices/tabs
Concerns          just set/read it            caching, loading, errors, retries, dedup
```

## サーバーデータをUIステートとして扱う場合の問題

```jsx
// ❌ treating server data as plain local state — you must hand-build everything
function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetch("/api/users")
      .then(r => r.json()).then(setUsers)
      .catch(setError).finally(() => setLoading(false));
  }, []);
  // and now: caching? refetch on focus? dedup? retries? stale data? all manual 😓
}
```

ロード/エラーの追跡、キャッシング、再フェッチ、重複排除、陳腐化処理を — フェッチごとに再実装することになります。

## 正しいツール：サーバーステートライブラリ

```jsx
// ✅ React Query / SWR / RTK Query handle caching, loading, errors, refetch for you
function Users() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then(r => r.json()),
  });
  // automatic: caching, background refetch, dedup, retries, stale-while-revalidate
}
```

これらのライブラリはサーバーステートの問題に特化して構築されています — ローカルキャッシュをリモートソースと同期させることです。

## 実践的な分け方

```text
UI state    → useState / Zustand / Context / Redux
Server state→ React Query / SWR / RTK Query / Apollo (for GraphQL)
```

## なぜ重要なのか

サーバーステートが**リモートデータのキャッシュ**である — 通常のローカルステートではない — ということを認識することは、モダンフロントエンドアーキテクチャにおける重要な洞察です。

これは、APIデータをRedux/useStateに投げ込むことが、大量のキャッシング/ロード手動コードにつながる理由、そして、専用のサーバーステートライブラリ（React Query、SWR）が存在し、広く採用されている理由を説明します。

この2つを分ける — UIステートをローカルストアに、サーバーステートをキャッシングライブラリに — はデータの多いアプリを大幅に単純化し、ボイラープレートと陳腐化バグの大きなカテゴリーを排除します。