Next.js › Server Components

Why can't server components use hooks like useState or useEffect?

Beginner

Answer

Server components render once on the server to produce static HTML and do not run again in the browser afterward, so hooks that manage ongoing client side state or respond to browser events have no meaningful place to run, since there is no continuous client side lifecycle for them to hook into.

// This would not work in a server component
export default function Page() {
  // useState requires a client component
  // const [count, setCount] = useState(0);
}

Real-world example A developer tries adding a useState hook to track a counter inside a server component, gets an error, and learns to move that specific piece of interactive logic into a separate client component instead.

Common follow-ups: How do you add interactivity to a page that is mostly a server component?;What is the smallest amount of a page that typically needs to be a client component?

Client Components & Hydration;State Management in Next.js Apps