'use client': The Boundary Between Server and Client
'use client' marks where server-only rendering ends and browser interactivity begins. Use it for components with state (useState), effects (useEffect), or event listeners (onClick), enabling them to run in the browser.
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.
Interview question
What is the primary purpose of declaring 'use client' at the top of a Next.js component file?
- a.To reduce the total JavaScript bundle size sent to the user's browser.
- b.To completely skip server-side rendering for that component and its children.
- c.To force the component to fetch all its data directly from the browser's API.
- d.To allow the component to use React Hooks like useState or handle user events.Correct
Why? this is the answer
'use client' is essential for components that require interactivity, such as using state, effects, or event listeners, as Server Components cannot handle these. It does not prevent server-side pre-rendering, nor does it inherently reduce the client bundle size; in fact, it adds JavaScript to it.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles