nextjs-server-components

name	nextjs-server-components
description	RSC usage, ''use client'' directive, and Component Purity. Use when working with React Server Components or deciding where to place the ''use client'' boundary. (triggers: app/**/*.tsx, src/app/**/*.tsx, app/**/*.jsx, src/app/**/*.jsx, use client, Server Component, Client Component, hydration)

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 or to opt out of static rendering when needed.