'use client': The Boundary Between Server and Client

WHY IT EXISTS: In the Next.js App Router, components are Server Components by default to maximize performance by sending minimal JavaScript to the browser. However, this means they can't be interactive. 'use client' was created as the explicit opt-in mechanism to enable client-side interactivity where needed.

THE MENTAL MODEL: Think of 'use client' as a "Ship to Browser" label. By default, Next.js keeps component code on the server to generate static HTML. When a component needs to be interactive, like a button with state, you put 'use client' at the top of its file. This tells Next.js to pack up that component's code and send it to the browser to make it "live."

HOW IT WORKS: When you add 'use client' to the top of a file, you're defining a "Client Boundary." Everything imported into that file, including child components, is considered part of the client bundle. Next.js still pre-renders these components on the server to generate the initial HTML. Then, it sends the corresponding JavaScript to the browser, which "hydrates" the static HTML, attaching event listeners and enabling state management.

WHEN TO USE IT: Use this directive when your component needs interactivity. This includes three main cases: first, using React hooks like useState, useEffect, or useContext; second, adding event listeners like onClick or onChange; and third, accessing browser-only APIs such as window, localStorage, or navigator.

WHEN NOT TO USE IT: Avoid 'use client' for components that only display data and have no interactivity. For example, static layouts, footers, or data-display components should remain Server Components to keep your app fast. The goal is to push client-side logic as far down your component tree as possible, into "leaf" components like buttons or forms.

ONE CANONICAL EXAMPLE: A simple counter button is the classic example. The page containing the button can be a Server Component. But the button itself needs state to track the count and an onClick handler to increment it. You would create a CounterButton.js file, put 'use client' at the top, and use useState and onClick inside it. This isolates the interactivity to just the button, while the rest of the page remains server-rendered.