Server & Client Components

Priority: P0 (CRITICAL)

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

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

Implementation Guidelines

• Next.js Default: Use React Server Components (RSC) for 90% of your UI. Leverage async components for direct data fetching.
• Client Boundary: Only use the 'use client' directive for interactivity (e.g., onClick), hooks (useState, useEffect), or browser APIs. Place the boundary at the leaf nodes to maximise RSC benefits and server-side rendering.
• Composition: Use <ClientWrapper><ServerDataComponent /></ClientWrapper> to pass Server Components as children to Client Components. Avoid Circular Dependencies between server and client. Direct database access: await db. queries inside async RSCs, and await params before accessing route segments.
• Data Fetching: Use fetch with cache: 'no-store' or revalidate: 0 to opt out of static rendering when needed.
• Loading & UI: Use Suspense triggers around slow async components to enable Streaming and better UX. Use loading.tsx for route-level loading states.
• Serialization: Ensure all props passed from Server to Client are Serializable (No functions, Dates, or Classes).
• Security: Never share secrets or server-only logic within Client Components. Use server-only package to enforce this.