表格的 data 是原始记录，列定义描述如何读值和渲染。排序、筛选和分页应明确是在当前数据上计算还是由服务端完成。

前置：React 组件与 Hooks、Promise；已完成环境搭建。适用 TanStack Query v5。目标是亲手验证读取、错误、写入、失效四个行为。

Headless 把行为与外观分开。表格库可以知道排序方向，却不知道你要蓝色按钮还是无边框表头。

QueryClient 保存查询缓存，Provider 让组件访问同一个实例。每次渲染都创建新实例，会让缓存身份变得不稳定。

Next.js 完整框架：把路由、渲染、取数、缓存和部署拆成五个决定。先确定代码执行位置，再决定数据新鲜度，最后用测量选择优化。

前置：已有能启动的 Next.js App Router + TypeScript 项目，知道客户端组件与事件处理器。本文包含多个独立片段，Context、Zustand、查询库与表单部分不是一套可直接拼接的应用；先只接入下文 Counte

先决定数据在服务端还是客户端取得，再考虑缓存。请求成功、HTTP 成功、JSON 格式合法和业务数据有效是不同检查。

Tailwind 把常用 CSS 规则表达为类名。布局仍受盒模型、可用宽度和继承规则约束；加类名不能替代理解这些规则。

URL 决定页面身份，嵌套布局决定共享范围。路由参数、查询参数与组件内部状态用途不同；需要分享或刷新保留的筛选往往属于 URL。

TypeScript 在开发时检查代码关系，不会自动验证服务器返回的 JSON。把任意数据断言成 User 只是告诉编译器信任你。