SuperAPI AI 工具集

nextjs-server-components

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:该技能聚焦 Next.js 16(React 19)中 Server Component 与 Client Component 的边界本身,帮助决定何时使用服务端组件、何时使用客户端组件,以及在组件内直接获取数据、实现流式与渐进式渲染。

主要能力:Server Component 是 Next.js 16 的默认渲染模型,无需指令;组件不进入浏览器包,可直接访问数据库、读取文件而无需 API 层;支持 Suspense 边界流式渲染、自动代码拆分与 SEO 友好的完整 HTML。技能覆盖组合模式(把 Server Component 作为 children 传入 Client Component)、用 server-only 包防止密钥意外泄漏、用 Promise.all() 并行获取独立数据、用 use cache 缓存昂贵的服务端计算。

关键规则:仅在需要 Hooks、事件或浏览器 API 时使用 'use client';不要把 server-only 导入客户端;跨边界 props 必须可序列化,不能传函数、类或 Date;异步组件仅限服务端,Client Component 不能是 async;在数据被消费处就近取数。

使用方式:资料给出强制 Agent 工作流——实现前并行启动三个 Agent(explore-codebase 分析现有组件边界、research-expert 通过 Context7/Exa 核对最新 RSC 文档、mcp__context7__query-docs 检查 Next.js 16 RSC 模式),实现后运行 fuse-ai-pilot:sniper 验证。参考文档包括 rsc-patterns.md(Server/Client 模式与 RSC 取数)和 streaming.md(流式、Suspense 与加载状态)。

适用场景:决定组件边界、组件内直接取数、流式与渐进式渲染、跨边界传数据、使用带直接数据库访问的异步组件。

限制:不覆盖 Next.js 路由与缓存 API 的通用内容(见 nextjs-16),也不覆盖客户端取数库(见 nextjs-tanstack-query)。具体安装命令、收费与平台信息暂未提供。