Next.js App Router

Server vs Client Components

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

• Event handlers (onClick, onChange, onSubmit)
• Browser APIs (localStorage, window, navigator)
• React hooks (useState, useEffect, useRef)
• Third-party client libraries

// Server Component (default) - no directive needed
export default async function Page() {
  const data = await fetchData(); // Direct async/await
  return <div>{data.title}</div>;
}

// Client Component - explicit directive
'use client';