Server vs Client Components in Next.js App Router. Server is default (async, cookies, headers, searchParams). Client needs 'use client' (hooks, events, browser APIs).
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>;
}