Server & Client Components

Priority: P0 (CRITICAL)

[!WARNING] If project uses pages/ directory instead of App Router, ignore this skill entirely.

App Router uses React Server Components (RSC) by default.

Workflow: Add Server/Client Component Split

1. Default to RSC — Async Server Components for data fetching.
2. Push 'use client' to leaves — Interactive leaf nodes only (Button, Form, Chart). Keep layouts/pages as Server Components to maximise RSC benefits.
3. Compose via children — Pass Server Components as children to Client Components.
4. Serialize props — Server-to-Client props must be serializable (no functions, Dates, or Classes).
5. Guard secrets — Import server-only in modules with sensitive logic.

Composition Pattern Example

See implementation examples