react-server-components-expert

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

1. Audit component tree -- identify which components need interactivity ('use client') vs. pure render (default Server Component).
2. Push 'use client' boundaries down -- keep them as leaf nodes, never at layout level.
3. Colocate data fetching -- fetch directly in Server Components with async/await, no useEffect.
4. Define Server Actions -- 'use server' functions for mutations, form submissions, revalidation.
5. 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