| license | Apache-2.0 |
| name | react-server-components-expert |
| description | Next.js App Router RSC architecture, Server Actions, streaming SSR, and partial hydration. Activate on: 'use server', 'use client', server components, App Router, streaming, partial hydration, Server Actions. NOT for: Pages Router (use nextjs-pages-router), client-only SPAs (use react-performance-optimizer), API routes without UI (use api-architect). |
| allowed-tools | Read,Write,Edit,Bash(npm:*,npx:*) |
| category | Frontend & UI |
| tags | ["react","next-js","server-components","streaming","app-router"] |
| pairs-with | [{"skill":"react-performance-optimizer","reason":"RSC reduces client bundle but perf tuning still needed for interactive islands"},{"skill":"data-fetching-strategist","reason":"Server Components change data fetching patterns fundamentally"}] |
React Server Components Expert
Architect Next.js App Router applications with Server Components, Server Actions, streaming SSR, and minimal client JavaScript.
Activation Triggers
Activate on: 'use server', 'use client' boundary decisions, App Router migration, streaming SSR, Server Actions for mutations, partial hydration strategy, RSC payload optimization.
NOT for: Next.js Pages Router (getServerSideProps/getStaticProps) -- use nextjs-pages-router. Client-only React SPAs -- use react-performance-optimizer. Pure API endpoints -- use api-architect.
Quick Start
- Audit component tree -- identify which components need interactivity (
'use client') vs. pure render (default Server Component).
- Push
'use client' boundaries down -- keep them as leaf nodes, never at layout level.
- Colocate data fetching -- fetch directly in Server Components with
async/await, no useEffect.
- Define Server Actions --
'use server' functions for mutations, form submissions, revalidation.
- Enable streaming -- use
loading.tsx and <Suspense> for progressive page rendering.
Core Capabilities
| Domain | Technologies | Key Patterns |
|---|
| Server Components | Next.js 14+, React 19 RSC | Zero-bundle server render, async components |
| Server Actions | 'use server' functions | Form mutations, revalidatePath, revalidateTag |
| Streaming SSR | <Suspense>, loading.tsx | Progressive rendering, skeleton fallbacks |
| Partial Hydration | 'use client' boundaries | Interactive islands in server-rendered pages |
| Caching | fetch() with next.revalidate, unstable_cache | ISR, on-demand revalidation, tag-based cache |
| Metadata |
