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

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

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?