nextjs-server-components

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.

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

Async RSCs: Fetch directly in async Server Components — await db. queries, await params for route segments.
Data Fetching: fetch with cache: 'no-store' or revalidate: 0 opts out of static rendering.
Streaming: Wrap slow async components in <Suspense>. Use loading.tsx for route-level skeletons.
Hydration: Server sends HTML + RSC payload; client hydrates only Client Components. Server Components: zero JS in client bundle.
Server-in-Client: Cannot import Server Component into Client Component.
Fix: Pass as children prop. See Composition Example.

No secrets in Client Components: Use server-only package to prevent accidental bundling.
No full DB objects passed to client: Minimize serialized props; pass IDs when possible.
No useState/useEffect in Server Components: These Client Component-only hooks.
No 'use client' at tree root: Push boundary to leaf components.

Keep server-only environment variables unprefixed and never echo client-prefix syntax when explaining secret boundaries; do not expose them to client bundles.

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant: