Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsIn Next.js App Router, pages and layouts are Server Components by default. Use them for server-side data access and UI that does not need browser features; use Client Components for state, event handlers, effects, and browser APIs. Keep each use client boundary as close as practical to the interactive feature, and compose server-rendered content with client-side controls when both are needed.
What Server and Client Components mean in Next.js
“Server” and “Client” describe component capabilities and module boundaries; they do not mean that only Server Components produce HTML. On an initial page load, Next.js uses the React Server Component (RSC) payload and Client Components to pre-render HTML. That HTML gives the browser an initial preview. The RSC payload helps reconcile the component trees, and JavaScript hydrates Client Components by attaching their event handlers. On later navigations, Next.js can prefetch and cache the RSC payload, while Client Components render on the client.
As an Amazon Associate I earn from qualifying purchases.
The RSC payload contains rendered Server Component output, placeholders and JavaScript references for Client Components, and props passed from server to client. For the current App Router behavior, see the Next.js Server and Client Components guide.
When should you use a Server Component?
Start with a Server Component for UI that does not need browser-only capabilities, particularly when it reads data from a database or private API. Server-side code can access data near its source without shipping its credentials or query logic in the client bundle. That does not replace authentication or authorization: protect data access and verify that each request is allowed to see the requested data.
#1 Best Overall
Server Components also suit content-focused or mostly static UI. They do not add their own JavaScript to the client bundle, and Next.js can pre-render content. This is a capability, not a promise that every route will be cached or faster: rendering and caching depend on the route and framework behavior.
- Read from a database or private API, with proper access checks.
- Render content that does not require state, effects, event handlers, or browser APIs.
- Keep data queries and server-only credentials out of client-side modules.
See the Next.js data fetching guide for server-side fetching patterns and their rendering implications.
Rank #2
When do you need a Client Component?
Use a Client Component when a feature needs client-side React capabilities: local state, event handlers, effects, or custom hooks that rely on those capabilities. Browser APIs such as window, localStorage, or geolocation also belong on the client because they are not available in the server environment.
- A button changes visible state after a click.
- A form responds to user input in the browser.
- An effect synchronizes with a browser API or client-side subscription.
- A feature reads browser storage or requests geolocation.
The use client directive marks a module as an entry point to the client module graph. Put it at the top of the file, before imports. You generally do not need to repeat it in every file imported beneath that entry point. The imports and descendants of that entry point become part of the client-side module graph, so placing the directive on a large layout can increase the JavaScript surface sent to the browser. See the Next.js use client reference.
How to choose between them
| Need | Start with | Why and what to watch |
|---|---|---|
| Database or private API access | Server Component | Access data near its source and keep credentials and query logic out of the client bundle. Authenticate and authorize requests. |
| Mostly static or content-focused UI | Server Component | It does not add its own JavaScript to the client bundle; do not assume every route is cached or faster. |
| Clicks, input, local state, or effects | Client Component | These require client-side React capabilities. Keep the boundary around the interaction where practical. |
| Browser storage, geolocation, or another browser API | Client Component | The API is available in the browser, not the server environment. |
| Server-fetched content displayed inside an interactive modal or provider | Compose both | Pass rendered UI through a slot such as children; place providers deeply enough to leave more of the tree outside the client boundary. |
| Frequently polled or client-only data | Consider client-side fetching | The Next.js Backend for Frontend guide identifies these as cases where client-side fetching may be necessary. |
| Static export deployment | Check requirements first | A static export has no runtime server, so features that require the Next.js runtime are unsupported. |
When either approach seems workable, compare whether the feature needs browser capabilities, where private data access belongs, how much JavaScript reaches the browser, whether slow work needs streaming, how often data changes, and whether the deployment provides a Next.js runtime.
Can a Server Component contain a Client Component?
Yes. A Server Component can render a Client Component as a child and pass it serializable props. This lets the server handle data access and content while a focused client-side component handles interaction.
A Server Component can also pass server-rendered UI into a Client Component through a slot such as children. For example, a client-side modal or provider can wrap content rendered on the server. The server-rendered content does not become client-rendered merely because it is passed as a child; keep the interactive boundary focused on the component that needs it. Props crossing from a Server Component to a Client Component must be serializable by React.
Recommended Free Tools
What to watch for with server data and rendering
Slow requests and streaming
An awaited server-side request can delay the part of a route that depends on it. Server fetching is not automatically parallel: independent requests may be structured to run in parallel, while dependent requests necessarily run in sequence. Split work into smaller chunks and use loading UI or Suspense where appropriate so the framework can progressively send content rather than making the entire route wait for every piece of data.
Caching and dynamic rendering
Do not carry caching assumptions from one Next.js version to another. The current fetching guide says fetch requests are not cached by default and can block rendering until completion; check the guide for the exact version you use. The production checklist also notes that dynamic APIs such as cookies and searchParams can opt a route into dynamic rendering. Neither default makes a blanket claim about every route’s cache behavior or speed.
Client-side fetching and static export
Client-side fetching can be a better fit when data is client-only or needs frequent polling. Conversely, a static export cannot provide a runtime server for features that depend on the Next.js runtime. Confirm deployment constraints before relying on server-only capabilities; the relevant Next.js guidance is in its Backend for Frontend guide and static exports guide.
A practical rule for placing use client
- Build the route, layout, and content-focused UI as Server Components by default.
- Identify the smallest feature that needs state, event handlers, effects, or browser APIs.
- Put
use clientat the top of that feature’s module, before its imports. - Pass the Client Component only the serializable props it needs; pass server-rendered UI as
childrenwhen composition calls for it. - Review imports beneath the client entry point and avoid moving the boundary higher in the tree without a reason.
- Check the rendering, caching, and runtime requirements against the documentation for your Next.js version and deployment target.
This approach follows the Next.js production checklist, which recommends checking Client Component boundary placement to avoid unnecessarily increasing client bundle size.
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.
