- 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 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 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 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) "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) Resources Next.js 16 Documentation React 19.2 Blog Post React Server Components RFC App Router Migration Guide
react-server-components-framework
安装
npx skills add https://github.com/yonatangross/orchestkit --skill react-server-components-framework