用 React Server Components…

当组件只需服务端数据访问、不需要客户端状态或事件处理时，用 RSC 实现零包体积的服务端渲染。

适用场景

解决思路

1. 在支持 RSC 的框架（如 Next.js App Router）中，默认使用 Server Components 进行数据获取和非交互式 UI 渲染
2. 只给需要交互（事件处理器、state、effects）的组件添加 'use client' 指令
3. 在 Server Components 中使用重量级库（如 markdown 解析器、日期格式化库），实现零客户端包体积成本
4. 把 Server Components 与 SSR 配合使用，而不是当作 SSR 的替代品
5. 当框架支持时，用 Server Functions 或 Server Actions（'use server'）处理表单提交和变更操作
6. 在 Next.js App Router 中，不再使用 getServerSideProps，而是把 app/ 目录下的任意 React 组件写成 async 来在服务端获取数据
7. 采用 Container/Presentational 模式：用 Server Component 作为容器获取数据，再传给可交互的 Client Component
8. 利用 RSC 的自动代码分割：Client 组件中的普通 import 会被视为潜在分割点，并在服务端更早决定渲染哪个组件，让客户端更早开始加载
9. 用 RSC 在保持客户端状态的前提下重新获取服务端渲染的部分（如搜索结果列表），而不清空搜索输入、焦点或文本选择

适用边界 · 注意事项

• 组件需要客户端交互时——state（useState）、effects（useEffect）和事件处理器都要求使用 Client Components
• 组件依赖浏览器专有 API（如 window、localStorage、IntersectionObserver）时
• 组件本身已经很小，引入服务端/客户端边界带来的复杂度超过其收益时