In the Next.js App Router, 'use client' is a boundary declaration—not a code smell. Use it where a component needs browser capabilities or interactivity, and place it deliberately: the file’s imports and components beneath that boundary become part of the client module graph. The goal is to keep server and client responsibilities well placed, not to minimize the number of directive strings.
What does 'use client' do?
The directive marks a file as an entry point for Client Components and establishes a client-server boundary. It is generally needed in files whose exported components are used directly from Server Components; it does not have to appear in every file containing a Client Component. A component imported beneath an existing client entry point is already within that client graph.
As an Amazon Associate I earn from qualifying purchases.
In Next.js App Router, components are Server Components by default. A directive changes how the marked file and its imports participate in the application; it does not label a component as poorly designed.
When does a component need a client boundary?
Use a Client Component when its implementation depends on capabilities that run in the browser or on user interaction, such as:
#1 Best Overall
- State and event handlers, such as opening a menu or updating a search field as a user types.
- Effects and browser APIs, such as reading from
localStorage. - Custom hooks that rely on client-side behavior.
- A third-party component that uses client-only features and does not provide a client-marked entry point.
Keep data fetching, secret-bearing logic, and static presentation in Server Components when they do not need those client capabilities. This can keep secrets out of browser code and avoid sending unnecessary JavaScript. Props passed from a Server Component to a Client Component must be serializable by React; an ordinary function callback cannot simply cross that boundary as a prop.
Why does placement matter?
When a file is marked with 'use client', its imports and child components are considered part of the client bundle. A broad boundary can therefore pull code into the client module graph that does not need browser interactivity. A narrow boundary can keep unrelated static UI on the server.
Rank #2
For example, on a mostly static page with one interactive search field, the page and static navigation can remain Server Components while the search control is the client entry point. The relevant question is not whether the page contains any client code; it is how much of the tree must be in the client graph to provide the required behavior.
Recommended Free Tools
Does a Client Component render only in the browser?
No. On an initial load, Next.js can render HTML for the page as a preview, send the React Server Component (RSC) Payload to reconcile the component trees, and use JavaScript to hydrate Client Components so they become interactive. On later navigation, Next.js uses prefetched or cached RSC Payload alongside client-side rendering. “Client Component” describes the component’s client-side role; it does not mean the component is necessarily absent from initial server-rendered HTML.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How can server-rendered content sit inside an interactive component?
A Server Component can pass rendered content to a Client Component through a slot such as children. For instance, a client-side modal wrapper can receive a server-rendered cart as its child. The wrapper supplies the interactive behavior while the cart’s server-rendered content remains composed by the server.
React context is not supported in Server Components. When context is needed, use a Client Component provider around the server-rendered content and place that provider deep in the tree where feasible, leaving more of the surrounding static UI outside the client boundary.
Quick Recap
Rank #4
How should you review a 'use client' boundary?
- Identify the capability. Find the state, event handling, effect, browser API, custom hook, or client-only dependency that requires client execution.
- Find the narrowest useful entry point. Place the directive at the file that starts the interactive part of the tree, rather than moving a whole page or layout into the client graph by default.
- Trace imports and descendants. Check whether the boundary includes static UI, data-access modules, or secret-bearing code. Keep server-only modules out of the client graph; Next.js documents
server-onlyas a way to flag inappropriate imports. - Consider composition. If an interactive wrapper needs server-rendered content, pass that content through
childrenor another slot instead of importing server-only implementation into client code. - Inspect the production output. Review boundary placement and use
@next/bundle-analyzerto find large modules and dependencies. The Next.js guidance gives no universal bundle-size cutoff that makes a particular directive placement a performance defect; assess the actual application.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
