Next.js App Router

Server vs Client components

Default to Server Components. Only add "use client" when you need:

• Event handlers (onClick, onChange)
• Browser APIs (window, localStorage)
• React state or lifecycle (useState, useEffect)
• Context providers

// app/dashboard/page.tsx — Server Component (no directive needed)
export default async function DashboardPage() {
  const data = await fetchData()  // direct async/await, no useEffect
  return <Dashboard data={data} />
}