Nextjs Server Client Components

Next.js Server vs Client Components

Quick Start

Server (default): Async, cookies(), headers(), searchParams prop, redirect(), <Link> Client: 'use client' + hooks, events, browser APIs, useSearchParams() (needs Suspense)

Decision: Need hooks/events? → Client. Need cookies/headers/data fetch? → Server.

// Server Component (default)
export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const q = (await searchParams).q || '';
  return <div>Search: {q}</div>;
}

// Client Component
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Reference Files

<!-- PROGRESSIVE DISCLOSURE GUIDELINES: - Keep this file ~50 lines total (max ~150 lines) - Use 1-2 code blocks only (recommend 1) - Keep description <200 chars for Level 1 efficiency - Move detailed docs to references/ for Level 3 loading - This is Level 2 - quick reference ONLY, not a manual -->