Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteIn the Next.js App Router, pages and layouts are Server Components by default. Use a Client Component only where the interface needs client-side capabilities such as state, event handlers, effects, browser APIs, or hooks that depend on them. Keep data access and static or data-heavy UI on the server, and make the interactive boundary as small as practical.
What is the difference?
Server and Client Components are different execution environments and capabilities, not competing ways to write every component. A Server Component is rendered on the server and can work close to databases or APIs. It can keep secret-bearing code out of the browser and does not itself require client JavaScript. A Client Component is the right place for behavior that needs the browser or React client-side features such as state and effects.
This guide covers the Next.js App Router, which uses React features including Server Components, Suspense, and Server Functions. The defaults discussed here should not be assumed for the Pages Router or for React apps outside Next.js; their rendering setup may differ. See the Next.js App Router documentation.
| Decision | Server Component | Client Component |
|---|---|---|
| App Router pages and layouts | Default | Opt in where needed |
| Database/API access and secrets | Appropriate for server-side access | Keep secrets out of client code; pass only needed data |
| State, event handlers, effects | Not available as client-side behavior | Appropriate |
Browser APIs such as window or localStorage |
Unavailable during server execution | Appropriate |
| Client JavaScript | Does not require client JavaScript for the component itself | The component and its client-side dependency subtree participate in client delivery |
| Props crossing the boundary | Can pass data to a Client Component | Received props must be serializable by React |
When should you use a Client Component?
Start with the Server Component default. Add a Client Component at the smallest useful boundary when a part of the UI needs interactivity or browser capabilities. Next.js summarizes the use case this way: “When you need interactivity or browser APIs, you can use Client Components to layer in functionality.” — Next.js, Getting Started: Server and Client Components.
#1 Best Overall
- Use a Client Component for stateful controls, such as a menu that opens on click or a search field that responds to input.
- Use one for event handlers, effects, browser APIs, or custom hooks that depend on client-side capabilities.
- Keep surrounding content, layout, and data fetching in Server Components where possible.
If a third-party component depends on client-only features but does not establish its own client boundary, put it behind a small Client Component entry point.
What does use client do?
The 'use client' directive marks a module as an entry point to the client-side module graph. Imports beneath that boundary participate in the client graph, so placing the directive high in the tree can bring more code into client delivery than the interactive feature requires. The Next.js reference says: “The ‘use client’ directive defines the client-server boundary, and the components exported from such a file serve as entry points to the client.” — Next.js, Directives: use client.
Rank #2
Put the directive at the file that exports the client entry point. Files imported underneath that entry point do not each need their own directive. For example, if a page needs an interactive search box, keep the page a Server Component and import a small client-side search component into it rather than marking the whole page or layout as client-side.
Props passed from a Server Component across the boundary must be serializable by React. Ordinary function props are not suitable; redesign the boundary or use the applicable Server Function pattern when the interaction requires server-side work. Consult the directive reference for current requirements.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Can a Server Component render inside a Client Component?
Not by importing a Server Component into a Client Component and expecting that import to execute on the server. Instead, have a Server Component parent render both components, then pass the server-rendered UI to the client component as children or another slot prop.
For example, a server-rendered page can fetch the data and render a client-side modal wrapper with server-generated content as its child. The wrapper controls client behavior, while the parent supplies the content. This keeps the data work on the server without requiring the modal to own or recreate that work. See Next.js’s composition patterns.
How rendering and hydration work
A Client Component is not necessarily absent from the server-rendered first load. On an initial load, Next.js uses React to produce HTML for the page, including the initial display of Client Components, and sends a React Server Component (RSC) payload. That payload contains rendered Server Component output, placeholders and JavaScript references for Client Components, and props passed to those components.
The browser can display the HTML first. It then uses the RSC payload to reconcile the component tree and hydrates Client Components, attaching their event behavior. On later navigations, Next.js uses prefetched and cached RSC payloads; Client Components are rendered on the client. The term “Client Component” describes the client-capable module boundary and interactivity model, not a guarantee that its initial HTML is never pre-rendered.
How to choose a boundary in practice
- Begin with the server default. App Router pages and layouts are Server Components unless you opt into a client boundary.
- Find the capability that requires the browser. Identify the smallest region needing state, event handling, effects, a browser API, or a client-dependent hook.
- Move only that region to a Client Component. Keep surrounding static layout and data-heavy content in Server Components.
- Fetch and protect data on the server. Pass the client component only the data it needs, in serializable props.
- Compose server-rendered UI through slots. For a client wrapper such as a modal, have a Server Component parent render the wrapper and the server UI, passing the latter as children or a slot.
- Place context providers deliberately. Put a provider and its context consumers in the client environment, then render the provider from the server tree deeply enough to avoid wrapping static regions unnecessarily.
Common mistakes to avoid
- Marking an entire layout client-side for one menu or search field: move the boundary down to the interactive feature so unrelated modules do not enter the client graph.
- Adding
'use client'to every file: the directive belongs on client entry points, not every file imported below them. - Passing unsupported values across the boundary: ordinary props must be serializable by React; function props need an appropriate design rather than being passed as plain data.
- Using client features directly in a Server Component: move code that needs
useState, effects, orwindowinto a Client Component. - Importing a Server Component into a client wrapper: create the server-rendered child in a Server Component parent and pass its output through children or a slot.
- Using React context directly in a Server Component: put the provider and consumers that use context in the client environment, with the provider rendered from the server tree.
What performance benefit should you expect?
Server Components do not add their own client JavaScript, and keeping the client boundary narrow can reduce the JavaScript sent to the browser. That is architectural guidance, not a guaranteed speedup, bundle-size reduction, SEO gain, or Core Web Vitals result for every app. Measure the application to establish its actual outcome. The relevant guidance is in the Server and Client Components guide and the Next.js production checklist.
Next.js documentation pages evolve; the guide was marked updated March 16, 2026, and the directive reference February 27, 2026. Check the current docs along with the Next.js and React versions installed in your project before copying examples.
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.
