SuperAPI AI 工具集

react-server-components-framework

前端与建站

查看项目

更新于 10-16 05:00

技能介绍

用途:该技能用于设计和实现基于 Next.js 15 App Router 的 React Server Components(RSC)应用,覆盖服务端优先架构、流式 SSR、Server Actions 与现代数据获取。适用场景包括构建 Next.js 15+ App Router 应用、划分 Server 与 Client 组件边界、实现带缓存与重新验证的数据获取、用 Server Actions 处理变更、用流式与 Suspense 优化性能、实现 Partial Prerendering(PPR)以及并行路由、拦截路由等高级路由模式。

主要能力:区分 Server Components(默认,可 async/await、直接访问数据库与文件系统、不向客户端发送 JS、不能用 hooks 或浏览器 API)与 Client Components('use client',可用 hooks 与浏览器 API、不能 async、会打包 JS)。数据获取方面支持 fetch 的 force-cache、next.revalidate、no-store、tags 等缓存与重新验证选项,以及并行获取、路由段配置、generateStaticParams。Server Actions 支持表单渐进增强、useFormStatus、useFormState、useOptimistic 乐观 UI、Zod 校验。流式渲染通过 Suspense 与 loading.tsx 实现,另有 error.tsx、not-found.tsx、Metadata API 等。

使用方式:技能内含 references(component-patterns、data-fetching、server-actions、routing-patterns、migration-guide)、templates(ServerComponent.tsx、ClientComponent.tsx、ServerAction.tsx)、examples/blog-app 与 checklists/rsc-implementation.md,可用 grep 在 references 中检索模式。

限制:资料未提供安装命令、收费与价格信息;具体 API 行为以 Next.js 官方文档为准。