The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In the Next.js App Router, 'use client' is a boundary declaration, not a code smell. Add it where a component needs client-side capabilities such as state, event handlers, effects, browser APIs, or custom hooks. Place that boundary deliberately: imports beneath it become part of the client module graph, so a small interactive component can often stay client-side while the page around it remains a Server Component.
What ‘use client’ does
The directive marks a file as an entry point for Client Components and establishes a boundary between server and client code. It is not needed in every file that contains a Client Component; it belongs where components are exported for use from Server Components. The Next.js directive reference describes it as defining the client-server boundary.
This behavior applies to the App Router. In that router, components are Server Components by default unless they are brought into a client boundary. Do not assume the same default applies to every Next.js routing setup.
Free tools Windows power users keep installed
One-click scans. No signup required.
When a component needs a client boundary
Use a Client Component when its behavior depends on capabilities that run in the browser or require client-side React behavior. Common examples include:
#1 Best Overall
- Managing state or responding to user events.
- Running effects.
- Reading browser APIs such as
localStorage. - Using a custom hook that requires client-side behavior.
- Rendering a third-party component that relies on client-only features, when its package does not provide a client-marked entry point.
By contrast, Server Components are a natural place for data fetching near its source, secret-bearing logic, and static presentation. Keeping those responsibilities on the server can reduce the JavaScript sent to the browser and help keep secrets out of browser code.
Why placement matters more than the directive count
Once a file is marked 'use client', its imports and child components are treated as part of the client bundle, as the Next.js Server and Client Components guide explains. A directive at a high-level page or layout can therefore bring more of the module graph into the client boundary than a directive on a focused interactive component.
Rank #2
Consider a mostly static page with a search field. The page, navigation, and other static content can remain server-rendered, while the search control serves as the client entry point. The right boundary depends on the component’s needs and the imports beneath it—not on a goal of eliminating every directive.
Client Components are not necessarily client-only on first load
On an initial request, Next.js can render Client Components into HTML for the first-page preview. The browser then uses the RSC Payload to reconcile the component trees and JavaScript to hydrate Client Components so they become interactive. On later navigation, prefetched or cached RSC Payload and client rendering are involved. “Client Component” describes the component’s boundary and behavior; it does not mean the component is never rendered on the server.
Keep server-rendered content inside interactive interfaces
A Client Component can receive server-rendered content from a Server Component through a slot such as children. For example, a client-side modal wrapper can display a cart rendered on the server. This composition lets an interactive wrapper coexist with content that does not need to become client code.
React context is not supported in Server Components. When context is needed, a Client Component provider can wrap server-rendered children. Place providers deep in the tree where practical so more of the surrounding static content remains optimizable.
Check props and imports at the boundary
Props passed from a Server Component to a Client Component must be serializable by React. A regular function callback cannot simply cross that boundary as a normal prop. Design the interaction around serializable data and client-side behavior rather than assuming server and client components can exchange arbitrary values.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallAlso keep secret-bearing modules and server-only code out of the client module graph. The Next.js guide describes using server-only to flag inappropriate imports. If a dependency is accidentally pulled under a client boundary, move the boundary or the relevant import rather than exposing credentials or server logic to browser code.
Review boundaries with evidence, not a slogan
For each boundary, ask what client capability is required, which imports and descendants it brings into the client graph, and whether data access or static presentation can remain on the server. Then inspect the production output and runtime behavior. The Next.js production checklist recommends reviewing client boundary placement and points to @next/bundle-analyzer for investigating large modules and dependencies.
There is no universal directive count or bundle-size cutoff that proves a placement is a performance defect. The useful question is whether the boundary includes code that needs to run on the client, and whether the resulting build is appropriate for your application.
Quick Recap
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.
