为什么要区分 UI state 和 server state？

Question

Accepted Answer

**UI state** 是您的应用在本地拥有并控制的数据（toggles、表单输入、选中的标签页）。**Server state** 是存储在服务器上的数据，仅在客户端上进行*缓存*（获取的用户、产品、帖子）。它们具有根本不同的特性，需要不同的工具。

## 关键差异

```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
```

## 将 server 数据当作 UI state 处理的问题

```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 😓
}
```

您最终会重新实现 loading/error 跟踪、缓存、重新获取、去重和陈旧性处理 — 对每个 fetch 都要这样做。

## 正确的工具：server-state 库

```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
}
```

这些库是专门为 server-state 问题构建的 — 让本地缓存与远程数据源保持同步。

## 实际的分离

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

## 为什么这很重要

意识到 server state 是**远程数据的缓存** — 而不是常规的本地 state — 这是现代前端架构的一个重大洞察。

它解释了为什么把 API 数据转储到 Redux/useState 会导致大量手动缓存/loading 代码，以及为什么存在专门的 server-state 库（React Query、SWR）并被广泛采用。

将两者分离 — UI state 放在本地存储中，server state 放在缓存库中 — 可以大幅简化数据密集型应用，并消除大量的样板代码和陈旧性 bugs。