Covers composition patterns (passing Server Components as children into Client Components), the server-only package to prevent accidental secret leakage, parallel data fetching with Promise.all(), and caching server computations with use cache. Does not cover Next.js routing/caching APIs generally (nextjs-16) or client-side data-fetching libraries (nextjs-tanstack-query) — this skill is specifically about the server/client component boundary itself.
Next.js Server Components
Server Components are the default rendering model in Next.js 16 with React 19.
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- fuse-ai-pilot:explore-codebase - Analyze existing component boundaries
- fuse-ai-pilot:research-expert - Verify latest RSC docs via Context7/Exa
- mcp__context7__query-docs - Check Next.js 16 RSC patterns
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Deciding between Server and Client Components
- Fetching data directly in components without API routes
- Implementing streaming and progressive rendering
- Passing data across the server/client boundary
- Using async components with direct database access
Why Server Components
| Feature | Benefit |
|---|---|
| Zero client JS | Components never ship to the browser bundle |
| Direct data access | Query databases, read files without API layer |
| Streaming | Progressive rendering with Suspense boundaries |
| Automatic code splitting | Client Components are lazy-loaded by default |
| SEO-friendly | Full HTML rendered on the server |
Critical Rules
- Server Components are default - No directive needed
'use client'only when needed - Hooks, events, browser APIs- Never import server-only into client - Use
server-onlypackage - Props must be serializable - No functions, classes, or Dates across boundary
- Async components are server-only - Client Components cannot be async
- Colocate data fetching - Fetch where the data is consumed
Best Practices
- Push client boundaries down - Keep
'use client'as deep as possible - Composition pattern - Pass Server Components as
childrento Client - Use
server-only- Prevent accidental client imports of secrets - Parallel fetching - Use
Promise.all()for independent data - Cache with
use cache- Cache expensive server computations - Stream with Suspense - Wrap slow components for progressive loading
Reference Guide
| Need | Reference |
|---|---|
| Server vs Client patterns | rsc-patterns.md |
| Streaming and Suspense | streaming.md |
| Data fetching in RSC | rsc-patterns.md |
| Loading states | streaming.md |