题目重点：从服务端读取数据、客户端交互和可序列化 props 出发，说明组件放置与框架版本边界。
题意与假设
这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。
- 以支持 React Server Components 的框架和一页商品详情为训练场景；框架是否启用、路由与缓存规则需以项目实际配置为准。
- React 18 并发渲染与 Server Components 是不同概念；题目将两者相邻提问，不能推断特定部署架构。
解题路线
- 把敏感服务端读取、无需浏览器交互的内容留在 Server Component；需要点击、输入、Effect 或浏览器 API 的最小子树放进 Client Component。
- `'use client'` 定义模块边界：该模块及其依赖进入客户端图。边界组件从服务器接收的 props 应可序列化，不直接传数据库连接、任意函数或秘密密钥。
- Server Component 的结果由框架传输与组合；Client Component 负责交互。初始 HTML、后续导航、缓存/重验证和 hydration 的具体时序依赖框架，不一概承诺‘零 JavaScript’。
- 以 bundle 体积、服务端响应时间、交互可用时间和缓存命中测量边界；过大 client 子树增加下载与 hydration，过多服务端往返会拉长交互路径。
手动走一遍
商品详情标题、价格和库存由服务端数据源读取并渲染；数量选择器与加入购物车按钮作为小的 Client Component，接收可序列化的商品 ID 与展示价格。结账库存还要在服务端重新校验，不能信任客户端传回的显示值。
规模与取舍
服务端读取成本取决于数据查询与缓存；客户端成本取决于下发模块和 hydration 子树大小。组件边界不是算法 Big-O 优化，须按实际路由与缓存策略测量首屏及交互延迟。
易错点与追问
容易失分的边界
- 把 Server Component 等同传统 SSR，或把 Client Component 说成永远不会生成初始 HTML。
- 在服务器组件中用 useState/useEffect、window 或本地存储。
- 把数据库密钥或不可序列化的连接对象作为 client props。
- 把整个路由根组件标成 client，导致本可留在服务端的依赖进入浏览器。
- 不说明 React/框架版本，直接把某框架缓存行为当通用 React 规则。
继续深挖
- `'use client'` 边界如何影响依赖包进入客户端 bundle？
- 服务端传来的价格为何仍需在提交订单时再次核验？
- 何时让 server component 包含 client component，何时应把状态提升到 client 子树？
- 如何用网络瀑布和 bundle 分析检验边界收益？
技术参考
- React 官方 Server Components：组件在服务端执行及与客户端组件组合。
- React 官方 use client：客户端模块边界与可序列化 props。
