React › Server Components

What is a Client Component and when do you need one instead of a Server Component?

Beginner

Answer

A Client Component runs in the browser and can use hooks, respond to clicks, and manage its own state, just like components worked before Server Components existed. You mark a file as a Client Component using the words use client at the very top, and you need one whenever a piece of the interface needs interactivity.

'use client';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'Liked' : 'Like'}
    </button>
  );
}

Real-world example A blog article page renders mostly as a Server Component for fast loading, but its like button is marked as a Client Component since it needs to respond to clicks and remember whether the user already liked it.

Common follow-ups: Can a Server Component include a Client Component inside it?;What happens if you forget to add the use client directive to an interactive component?

Hooks;Static Site Generation (SSG) & Hydration