Topic 29 of 47
When to Use Server vs Client Components
Overview
Optimizing Next.js apps requires strategically mixing Server and Client Components. You should default to Server Components, and push Client Components as far down the component tree as possible (the 'leaves' of the tree).
Syntax
tsx
// ✅ DO: Interleave components by passing children
// app/page.tsx (Server)
import ClientLayout from './ClientLayout';
import ServerContent from './ServerContent';
export default function Page() {
return (
<ClientLayout>
{/* ServerContent stays on the server! */}
<ServerContent />
</ClientLayout>
);
}Common Pitfalls
- Making an entire page a Client Component ('use client' at the top of page.tsx) ruins the performance benefits of the App Router. Isolate interactivity to small wrapper components.
- Data fetching inside a Client Component (via useEffect) is slow. Always try to fetch in a Server Component and pass the data as props to the Client Component.
Real-World Example
A decision matrix for Server vs Client components:
example
tsx
/**
* USE SERVER COMPONENTS FOR:
* - Fetching data
* - Accessing backend resources directly
* - Keeping sensitive info on the server (tokens, API keys)
* - Reducing client-side JavaScript bundle size
*
* USE CLIENT COMPONENTS FOR:
* - Interactivity and event listeners (onClick, onChange)
* - State and Lifecycle (useState, useEffect, useReducer)
* - Accessing browser-only APIs (window, document, geolocation)
* - Using custom React hooks that depend on state/effects
*/