Server-state libraries（React Query/TanStack Query、SWR、RTK Query）专门用于管理从服务器获取的数据 — 将其视为一个缓存以与远程源保持同步。它们自动处理缓存、loading/error 状态、refetching 和 deduplication，替代了大量手动代码。
服务器数据由服务器拥有，仅在客户端缓存，因此可能变得stale。手动管理意味着为每个端点重新实现缓存、loading/error 追踪、refetching、retries 和 deduplication — 容易出错且重复。
import { useQuery } from "@tanstack/react-query";
function Users() {
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["users"], // cache key
queryFn: () => fetch("/api/users").then(r => r.json()),
staleTime: 60_000, // consider fresh for 1 min
});
if (isLoading) return <Spinner />;
if (error) return <Error />;
return <List data={data} />;
}
该单个 hook 提供：
✓ Caching — data cached by queryKey, shared across components
✓ Loading/error — isLoading/error states managed for you
✓ Deduplication — same query in 5 components = ONE network request
✓ Background refetch— refetch on window focus/reconnect to stay fresh
✓ Stale-while-revalidate — show cached data instantly, refetch in background
✓ Retries — auto-retry failed requests
✓ Pagination/infinite scroll, prefetching, cache invalidation
const mutation = useMutation({
mutationFn: (user) => api.createUser(user),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list
});
Mutation 之后，您会 invalidate 相关查询，缓存会 refetch — 保持 UI 与服务器一致。
Much of what people put in Redux is actually SERVER state.
Moving it to React Query often shrinks global state to just true UI state
(theme, modals, filters) — simplifying the whole app.
Server-state libraries 解决了通用状态工具（Redux、useState）处理不好的问题：保持客户端缓存与远程数据同步。
它们用声明式 hooks 替代了数百行手动 fetching/caching/loading 逻辑，并提供了复杂的行为（dedup、background refetch、stale-while-revalidate），这些行为很难手工正确构建。
认识到服务器状态值得拥有自己的专用工具 — 并且采用一个工具通常会显著简化全局状态 — 是最具影响力的现代前端架构见解之一。