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. See references/nextjs-16-upgrade.md for complete migration guide.

---

References

Server Components

See: references/server-components.md

Key topics covered:

• Async server components and direct database access
• Data fetching patterns (parallel, sequential, cached)
• Route segment config (dynamic, revalidate, PPR)
• generateStaticParams for SSG
• Error handling and composition patterns

Client Components

See: references/client-components.md

Key topics covered:

• The 'use client' directive and boundary rules
• React 19 patterns (function declarations, ref as prop)
• Interactivity patterns (state, forms, events)
• Hydration and avoiding hydration mismatches
• Composition with Server Components via children

Streaming Patterns

See: references/streaming-patterns.md

Key topics covered:

• Suspense boundaries and loading states
• loading.tsx automatic wrapping
• Parallel streaming and nested Suspense
• Partial Prerendering (PPR)
• Skeleton component best practices

React 19 Patterns

See: references/react-19-patterns.md

Key topics covered:

• Function declarations over React.FC
• Ref as prop (forwardRef removal)
• useActionState, useFormStatus, useOptimistic
• Activity component for preloading UI
• useEffectEvent hook

Server Actions

See: references/server-actions.md

Key topics covered:

• Progressive enhancement patterns
• Form handling with useActionState
• Validation with Zod
• Optimistic updates

Routing Patterns

See: references/routing-patterns.md

Key topics covered:

• Parallel routes for simultaneous rendering
• Intercepting routes for modals
• Route groups for organization
• Dynamic and catch-all routes

Migration Guide

See: references/migration-guide.md

Key topics covered:

• Pages Router to App Router migration
• getServerSideProps/getStaticProps replacement
• Layout and metadata migration

Cache Components (Next.js 16)

See: references/cache-components.md

Important: Cache Components replaces experimental_ppr as the declarative caching model in Next.js 16.

Key topics covered:

• The "use cache" directive replacing experimental_ppr
• cacheLife() for fine-grained cache duration control
• cacheTag() and revalidateTag() for on-demand invalidation
• Configuration: cacheComponents: true in next.config.ts
• Before/after migration examples (Next.js 15 to 16)
• Integration with Partial Prerendering (PPR)
• Serialization rules and constraints

Next.js 16 Upgrade Guide

See: references/nextjs-16-upgrade.md

Key topics covered:

• Version requirements (Node.js 20.9+, TypeScript 5.1+)
• Breaking changes (async params, cookies, headers)
• middleware.ts to proxy.ts migration
• PPR removal and Cache Components replacement
• Turbopack as default bundler
• New caching APIs (updateTag, refresh, revalidateTag)

TanStack Router

See: references/tanstack-router-patterns.md

Key topics covered:

• React 19 features without Next.js
• Route-based data fetching
• Client-rendered app patterns

---

Searching References

# Find component patterns
grep -r "Server Component" references/

# Search for data fetching strategies
grep -A 10 "Caching Strategies" references/data-fetching.md

# Find Server Actions examples
grep -B 5 "Progressive Enhancement" references/server-actions.md

# Locate routing patterns
grep -n "Parallel Routes" references/routing-patterns.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)
"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

---

Related Skills

After mastering React Server Components:

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

---

Capability Details

react-19-patterns

Keywords: react 19, React.FC, forwardRef, useActionState, useFormStatus, useOptimistic, function declaration Solves:

• How do I replace React.FC in React 19?
• forwardRef replacement pattern
• useActionState vs useFormState
• React 19 component declaration best practices

use-hook-suspense

Keywords: use(), use hook, suspense, promise, data fetching, promise cache, cachePromise Solves:

• How do I use the use() hook in React 19?
• Suspense-native data fetching pattern
• Promise caching to prevent infinite loops

optimistic-updates-async

Keywords: useOptimistic, useTransition, optimistic update, instant ui, auto rollback Solves:

• How to show instant UI updates before API responds?
• useOptimistic with useTransition pattern
• Auto-rollback on API failure

rsc-patterns

Keywords: rsc, server component, client component, use client, use server Solves:

• When to use server vs client components?
• RSC boundaries and patterns

server-actions

Keywords: server action, form action, use server, mutation Solves:

• How do I create a server action?
• Form handling with server actions

data-fetching

Keywords: fetch, data fetching, async component, loading, suspense Solves:

• How do I fetch data in RSC?
• Async server components

streaming-ssr

Keywords: streaming, ssr, suspense boundary, loading ui Solves:

• How do I stream server content?
• Progressive loading patterns

caching

Keywords: cache, revalidate, static, dynamic, isr Solves:

• How do I cache in Next.js 16?
• Revalidation strategies

cache-components

Keywords: use cache, cacheLife, cacheTag, cacheComponents, revalidateTag, updateTag, cache directive Solves:

• How do I use the "use cache" directive?
• What replaced experimental_ppr?
• How do I set cache duration with cacheLife?
• How do I invalidate cache with cacheTag?
• How do I migrate from Next.js 15 fetch caching to use cache?

tanstack-router-patterns

Keywords: tanstack router, react router, vite, spa, client rendering, prefetch Solves:

• How do I use React 19 features without Next.js?
• TanStack Router prefetching setup
• Route-based data fetching with TanStack Query

async-params

Keywords: async params, searchParams, Promise params, await params, dynamic route params Solves:

• How do I access params in Next.js 16?
• Why are my route params undefined?
• How do I use searchParams in Next.js 16?
• How do I type params as Promise?

nextjs-16-upgrade

Keywords: next.js 16, nextjs 16, upgrade, migration, breaking changes, async params, turbopack, proxy.ts, cache components Solves:

• How do I upgrade to Next.js 16?
• What are the breaking changes in Next.js 16?
• How do I migrate middleware.ts to proxy.ts?
• How do I use async params and searchParams?
• What replaced experimental_ppr?
• How do I use the new caching APIs?