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.

Server Components (Default)

• Behavior: Rendered on server, sent as HTML/Payload to client. Zero bundle size for included libs.
• Capabilities: Async/Await, Direct DB access, Secrets usage.
• Restrictions: No useState, useEffect, or Browser APIs (window, localstorage).

Client Components

• Directive: Add 'use client' at the VERY TOP of the file.
• Usage: Interactivity (onClick), State (useState), Lifecycle effects, Browser APIs.
• Strategy: Move Client Components to the leaves of the tree.
  • Bad: Making the root layout a Client Component.
  • Good: Wrapping a <Button /> in a Client Component.

Composition Patterns

• Server-in-Client: You cannot import a Server Component directly into a Client Component.
  • Fix: Pass Server Component as children prop to the Client Component.

// ClientWrapper.tsx
'use client';
export default function ClientWrapper({ children }) {
  return <div>{children}</div>;
}

// Page.tsx (Server)
<ClientWrapper>
  <ServerComponent />
</ClientWrapper>;

Anti-Patterns

• Poisoning: Importing server-only secrets into Client Components (Use server-only package to prevent).
• Over-fetching: Passing large data props to Client Components (Serialization cost). Only pass IDs if possible.