server-components

server-components 技能为使用 Next.js App Router 的开发人员提供专家级架构指导。它旨在帮助用户理解 React Server Components (RSC) 与客户端组件之间的细微差别。通过理解由 'use client' 指令所强制执行的“客户端边界”，开发人员可以优化应用程序的性能、安全性和包体积。此技能协助确定组件的正确位置、管理异步数据获取，并实施高级组合模式，例如将服务器渲染的子组件封装在交互式客户端包装器内。用户将获得关于何时优先考虑服务器端执行（用于数据库访问和密钥管理）与客户端执行（用于状态交互、浏览器 API 和事件处理）的明确规则。核心功能包括 RSC 的架构审查、识别常见错误（如将服务器逻辑导入客户端包）、以及使用 Suspense 和并行数据获取的最佳实践。典型用例包括将旧模式迁移至 App Router、调试水合或边界问题，以及设计最小化客户端 JavaScript 的高效组件层级结构。实际输入包括组件文件路径或代码片段，输出则提供重构后的代码模式、结构图以及渲染行为说明。限制条件包括遵循 Next.js 序列化规则，避免不必要的 'use client' 使用，并确保数据在服务器与客户端之间正确流动。

• 提供关于 React Server Components 心智模型与客户端边界管理的专家指导。

• 识别 'use client' 与默认服务器组件的适用场景。

• 进阶组合策略，包括将子组件作为服务器组件传递以及基于插槽的布局。

• 数据获取优化技术，包括异步服务器函数、并行获取及 Suspense 流式处理。

• Next.js App Router 应用的架构故障排除，以减少包体积并提升性能。

• 保留敏感数据（API 密钥、数据库逻辑）仅在服务器端的最佳实践。

• 在 Next.js 中开始新页面或布局设计时使用此技能。

• 若遇到水合错误或指令使用不当时请咨询此技能。

• 在通过将繁重逻辑卸载至服务器来优化 Web Vitals 时应用这些模式。

• 利用提供的组合模式构建灵活、互动式的界面，且不牺牲性能。