Roughly three quarters of professional React developers now ship on Next.js, which means most React code being written in 2026 lives inside the App Router’s default: React Server Components. The confusion isn’t about what they are — it’s about exactly where the boundary between server and client sits, and the rules are stricter than most tutorials let on.
The Default You Didn’t Choose
Every file in the app/ directory is a Server Component unless you add ‘use client’ at the top. Server Components run exclusively on the server, can access databases and the filesystem directly, and send zero JavaScript to the browser for their own code — only their rendered HTML output ships.
Client Components are the opposite: they’re the ones that need interactivity, state, effects, or browser APIs like localStorage or window. They hydrate in the browser and their code is included in the JavaScript bundle.
The Rule Most Tutorials Skip: The Boundary Is Directional
Server Components can import and render Client Components. Client Components cannot import Server Components directly — the reverse import is not allowed by the framework. If a Client Component needs server-rendered content inside it, the pattern is to pass that content down as a children prop from a parent Server Component, not to import it.
The ‘use client’ directive marks a module boundary, not a single component: once a file is marked ‘use client’, every component imported into that file becomes part of the client bundle too. This is why the accepted best practice is pushing ‘use client’ as far down the tree as possible — onto the one button that needs an onClick handler, not onto the whole page that contains it.
Props Crossing the Boundary Must Be Serializable
When a Server Component passes props to a Client Component, those props travel over the network as serialized data — which means functions, class instances, and circular references can’t cross that boundary. This trips up developers most often with callback props and Date-like objects that need to be converted to plain values first.
Context Providers Are a Special Case
React Context is a Client Component feature — you cannot create or consume context inside a Server Component. That breaks a very common pattern: wrapping the whole app in a theme, auth, or i18n provider. The fix is to make the provider itself a small Client Component, but it can still wrap Server Component children without converting those children to client-rendered code, as long as it receives them via the children prop rather than importing them.
A Practical Decision Tree
- Default to a Server Component for anything that fetches data, reads from a database, or renders static markup.
- Add ‘use client’ only when the component needs useState, useEffect, event handlers, or a browser-only API.
- Keep client modules small — a single interactive button or form input, not the layout around it.
- Use the server-only package to get a build-time error if a server-only module accidentally gets imported into client code.
- Pass Server Component output into Client Components as children, never as a direct import.
Frequently Asked Questions
Can a Client Component import a Server Component?
No. The framework does not allow this import direction. Pass the Server Component’s rendered output down as a children or slot prop instead.
Does adding ‘use client’ to one component affect its children?
Yes — everything imported into that marked file becomes part of the client bundle, which is why the directive is described as marking a boundary rather than a single component.
Why can’t I use React Context in a Server Component?
Context is inherently a client-side runtime feature tied to React’s client reconciliation, so it requires a Client Component. Wrap the provider as a small client boundary and pass server-rendered children into it.
The Bottom Line
Most App Router performance problems trace back to a client boundary placed too high in the tree. The mental model that holds up in production is simple even if the edge cases aren’t: server for data and markup, client for interactivity, and the boundary pushed as close to the leaves as it can go.