react-server-components-framework by yonatangross/orchestkit
npx skills add https://github.com/yonatangross/orchestkit --skill react-server-components-frameworkReact Server Components (RSC) 实现了以服务器端渲染为主,同时具备客户端交互能力。本技能涵盖 Next.js 16 App Router 模式、Server Components、Server Actions 和流式渲染。
何时使用此技能:
| 特性 | Server Component | Client Component |
|---|---|---|
| 指令 | 无(默认) | 'use client' |
| Async/await | 支持 | 不支持 |
| Hooks | 不支持 | 支持 |
| 浏览器 API | 不支持 | 支持 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 数据库访问 | 支持 | 不支持 |
| 客户端 JS 包大小 | 零 | 发送至客户端 |
关键规则:Server Components 可以渲染 Client Components,但 Client Components 不能直接导入 Server Components(应使用 children prop 替代)。
Next.js 16 缓存组件(推荐):
import { cacheLife, cacheTag } from 'next/cache'
// 带持续时间的缓存组件
async function CachedProducts() {
'use cache'
cacheLife('hours')
cacheTag('products')
return await db.product.findMany()
}
// 使缓存失效
import { revalidateTag } from 'next/cache'
revalidateTag('products')
传统 Fetch 选项(Next.js 15):
// 静态(无限期缓存)
await fetch(url, { cache: 'force-cache' })
// 每 60 秒重新验证
await fetch(url, { next: { revalidate: 60 } })
// 始终获取最新数据
await fetch(url, { cache: 'no-store' })
// 基于标签的重新验证
await fetch(url, { next: { tags: ['posts'] } })
'use server'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
const post = await db.post.create({ data: { title } })
revalidatePath('/posts')
redirect("/posts/" + post.id)
}
路由参数和搜索参数现在都是必须被 await 的 Promise:
// app/posts/[slug]/page.tsx
export default async function PostPage({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ page?: string }>
}) {
const { slug } = await params
const { page } = await searchParams
return <Post slug={slug} page={page} />
}
注意: 同样适用于 layout.tsx、generateMetadata() 和路由处理器。加载完整迁移指南:Read("${CLAUDE_SKILL_DIR}/references/nextjs-16-upgrade.md")
使用 Read("${CLAUDE_SKILL_DIR}/references/<file>") 按需加载:
| 文件 | 内容 |
|---|---|
server-components.md | 异步服务器组件、数据获取模式、路由段配置、generateStaticParams、错误处理 |
client-components.md | 'use client' 指令、React 19 模式、交互性、水合作用、通过 children 进行组合 |
streaming-patterns.md | Suspense 边界、loading.tsx、并行流式渲染、PPR、骨架屏最佳实践 |
react-19-patterns.md | 函数声明、ref 作为 prop、useActionState、useFormStatus、useOptimistic、Activity、useEffectEvent |
server-actions.md | 渐进式增强、useActionState 表单、Zod 验证、乐观更新 |
routing-patterns.md | 并行路由、拦截路由、路由组、动态和全捕获路由 |
migration-guide.md | 从 Pages Router 迁移到 App Router、getServerSideProps/getStaticProps 的替代方案 |
cache-components.md | "use cache" 指令(取代 experimental_ppr)、cacheLife、cacheTag、revalidateTag、PPR 集成 |
nextjs-16-upgrade.md | Node.js 20.9+、破坏性变更(异步参数、cookies、headers)、proxy.ts 迁移、Turbopack、新的缓存 API |
tanstack-router-patterns.md | 不使用 Next.js 的 React 19 功能、基于路由的数据获取、客户端渲染应用模式 |
capability-details.md | 所有 12 个 RSC 能力的关键词和问题映射元数据 |
children 传递给 Client ComponentsPromise.all)generateStaticParamsscripts/ServerComponent.tsx - 包含数据获取的基本异步 Server Componentscripts/ClientComponent.tsx - 包含 hooks 的交互式 Client Componentscripts/ServerAction.tsx - 包含验证和重新验证的 Server Action| 错误 | 修复方法 |
|---|---|
| "You're importing a component that needs useState" | 添加 'use client' 指令 |
| "async/await is not valid in non-async Server Components" | 在函数声明中添加 async |
| "Cannot use Server Component inside Client Component" | 将 Server Component 作为 children prop 传递 |
| "Hydration mismatch" | 对 Date.now()、Math.random()、浏览器 API 使用 'use client' |
| "params is not defined" 或 params 返回 Promise | 在 params 前添加 await(Next.js 16 破坏性变更) |
| "experimental_ppr is not a valid export" | 改用带有 "use cache" 指令的缓存组件 |
| "cookies/headers is not a function" | 在 cookies() 或 headers() 前添加 await(Next.js 16) |
掌握 React Server Components 后:
每个 RSC 能力的关键词和问题映射元数据(react-19-patterns, use-hook-suspense, optimistic-updates-async, rsc-patterns, server-actions, data-fetching, streaming-ssr, caching, cache-components, tanstack-router-patterns, async-params, nextjs-16-upgrade)。
加载完整能力详情:Read("${CLAUDE_SKILL_DIR}/references/capability-details.md")
每周安装次数
81
代码仓库
GitHub Stars
132
首次出现
Jan 22, 2026
安全审计
安装于
gemini-cli73
opencode73
codex71
github-copilot71
cursor69
claude-code66
React Server Components (RSC) enable server-first rendering with client-side interactivity. This skill covers Next.js 16 App Router patterns, Server Components, Server Actions, and streaming.
When to use this skill:
| Feature | Server Component | Client Component |
|---|---|---|
| Directive | None (default) | 'use client' |
| Async/await | Yes | No |
| Hooks | No | Yes |
| Browser APIs | No | Yes |
| Database access | Yes | No |
| Client JS bundle | Zero | Ships to client |
Key Rule : Server Components can render Client Components, but Client Components cannot directly import Server Components (use children prop instead).
Next.js 16 Cache Components (Recommended):
import { cacheLife, cacheTag } from 'next/cache'
// Cached component with duration
async function CachedProducts() {
'use cache'
cacheLife('hours')
cacheTag('products')
return await db.product.findMany()
}
// Invalidate cache
import { revalidateTag } from 'next/cache'
revalidateTag('products')
Legacy Fetch Options (Next.js 15):
// Static (cached indefinitely)
await fetch(url, { cache: 'force-cache' })
// Revalidate every 60 seconds
await fetch(url, { next: { revalidate: 60 } })
// Always fresh
await fetch(url, { cache: 'no-store' })
// Tag-based revalidation
await fetch(url, { next: { tags: ['posts'] } })
'use server'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
const post = await db.post.create({ data: { title } })
revalidatePath('/posts')
redirect("/posts/" + post.id)
}
Route parameters and search parameters are now Promises that must be awaited:
// app/posts/[slug]/page.tsx
export default async function PostPage({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ page?: string }>
}) {
const { slug } = await params
const { page } = await searchParams
return <Post slug={slug} page={page} />
}
Note: Also applies to layout.tsx, generateMetadata(), and route handlers. Load: Read("${CLAUDE_SKILL_DIR}/references/nextjs-16-upgrade.md") for complete migration guide.
Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):
| File | Content |
|---|---|
server-components.md | Async server components, data fetching patterns, route segment config, generateStaticParams, error handling |
client-components.md | 'use client' directive, React 19 patterns, interactivity, hydration, composition via children |
streaming-patterns.md | Suspense boundaries, loading.tsx, parallel streaming, PPR, skeleton best practices |
react-19-patterns.md | Function declarations, ref as prop, useActionState, useFormStatus, useOptimistic, Activity, useEffectEvent |
server-actions.md |
children to Client ComponentsPromise.all) for independent datagenerateStaticParams for static routesscripts/ServerComponent.tsx - Basic async Server Component with data fetchingscripts/ClientComponent.tsx - Interactive Client Component with hooksscripts/ServerAction.tsx - Server Action with validation and revalidation| Error | Fix |
|---|---|
| "You're importing a component that needs useState" | Add 'use client' directive |
| "async/await is not valid in non-async Server Components" | Add async to function declaration |
| "Cannot use Server Component inside Client Component" | Pass Server Component as children prop |
| "Hydration mismatch" | Use 'use client' for Date.now(), Math.random(), browser APIs |
| "params is not defined" or params returning Promise | Add await before params (Next.js 16 breaking change) |
After mastering React Server Components:
Keyword and problem-mapping metadata for each RSC capability (react-19-patterns, use-hook-suspense, optimistic-updates-async, rsc-patterns, server-actions, data-fetching, streaming-ssr, caching, cache-components, tanstack-router-patterns, async-params, nextjs-16-upgrade).
Load full capability details: Read("${CLAUDE_SKILL_DIR}/references/capability-details.md")
Weekly Installs
81
Repository
GitHub Stars
132
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli73
opencode73
codex71
github-copilot71
cursor69
claude-code66
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
7,700 周安装
| Progressive enhancement, useActionState forms, Zod validation, optimistic updates |
routing-patterns.md | Parallel routes, intercepting routes, route groups, dynamic and catch-all routes |
migration-guide.md | Pages Router to App Router migration, getServerSideProps/getStaticProps replacement |
cache-components.md | "use cache" directive (replaces experimental_ppr), cacheLife, cacheTag, revalidateTag, PPR integration |
nextjs-16-upgrade.md | Node.js 20.9+, breaking changes (async params, cookies, headers), proxy.ts migration, Turbopack, new caching APIs |
tanstack-router-patterns.md | React 19 features without Next.js, route-based data fetching, client-rendered app patterns |
capability-details.md | Keyword and problem-mapping metadata for all 12 RSC capabilities |
| "experimental_ppr is not a valid export" | Use Cache Components with "use cache" directive instead |
| "cookies/headers is not a function" | Add await before cookies() or headers() (Next.js 16) |