React Server Components 框架指南：Next.js 16 App Router、Server Actions 与流式渲染

react-server-components-framework by yonatangross/orchestkit

95 周安装量

140 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/yonatangross/orchestkit --skill react-server-components-framework

React JavaScript 框架性能优化

🇨🇳中文介绍

React Server Components 框架

概述

React Server Components (RSC) 实现了以服务器端渲染为主，同时具备客户端交互能力。本技能涵盖 Next.js 16 App Router 模式、Server Components、Server Actions 和流式渲染。

何时使用此技能：

使用 App Router 构建 Next.js 16+ 应用程序
设计组件边界（Server Components 与 Client Components）
实现包含缓存和重新验证的数据获取
使用 Server Actions 创建数据变更操作
通过流式渲染和 Suspense 优化性能

快速参考

Server Components 与 Client Components

特性	Server Component	Client Component
指令	无（默认）	`'use client'`
Async/await	支持	不支持
Hooks	不支持	支持
浏览器 API	不支持	支持

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

数据获取快速参考

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'] } })

Server Actions 快速参考

'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)
}

异步参数/搜索参数（Next.js 16）

路由参数和搜索参数现在都是必须被 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 能力的关键词和问题映射元数据

将 Client Components 保持在组件树的边缘（叶子节点）
默认使用 Server Components
将最小的交互部分提取到 Client Components
将 Server Components 作为 children 传递给 Client Components

在 Server Components 中靠近使用数据的地方获取数据
对独立数据使用并行获取（Promise.all）
设置适当的缓存和重新验证选项
对静态路由使用 generateStaticParams

使用 Suspense 边界进行流式渲染
实现 loading.tsx 以提供即时加载状态
启用 PPR 以混合静态/动态内容
使用路由段配置来控制渲染模式

scripts/ServerComponent.tsx - 包含数据获取的基本异步 Server Component
scripts/ClientComponent.tsx - 包含 hooks 的交互式 Client Component
scripts/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 后：

流式 API 模式 - 实时数据模式
类型安全与验证 - tRPC 集成
边缘计算模式 - 全球部署
性能优化 - Core Web Vitals

每个 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")

🇺🇸English

React Server Components Framework

Overview

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:

Building Next.js 16+ applications with the App Router
Designing component boundaries (Server vs Client Components)
Implementing data fetching with caching and revalidation
Creating mutations with Server Actions
Optimizing performance with streaming and Suspense

Quick Reference

Server vs Client Components

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).

Data Fetching Quick Reference

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'] } })

Server Actions Quick Reference

'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)
}

Async Params/SearchParams (Next.js 16)

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.

References

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`

Best Practices Summary

Component Boundaries

Keep Client Components at the edges (leaves) of the component tree
Use Server Components by default
Extract minimal interactive parts to Client Components
Pass Server Components as children to Client Components

Data Fetching

Fetch data in Server Components close to where it's used
Use parallel fetching (Promise.all) for independent data
Set appropriate cache and revalidate options
Use generateStaticParams for static routes

Performance

Use Suspense boundaries for streaming
Implement loading.tsx for instant loading states
Enable PPR for static/dynamic mix
Use route segment config to control rendering mode

Templates

scripts/ServerComponent.tsx - Basic async Server Component with data fetching
scripts/ClientComponent.tsx - Interactive Client Component with hooks
scripts/ServerAction.tsx - Server Action with validation and revalidation

Troubleshooting

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)

Resources

Related Skills

After mastering React Server Components:

Streaming API Patterns - Real-time data patterns
Type Safety & Validation - tRPC integration
Edge Computing Patterns - Global deployment
Performance Optimization - Core Web Vitals

Capability Details

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

Repository

yonatangross/orchestkit

GitHub Stars

132

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli73

opencode73

codex71

github-copilot71

cursor69

claude-code66

Genkit JS 开发指南：AI 应用构建、错误排查与最佳实践

7,700 周安装