Build efficient React applications using Next.js Server Components that render on the server, reducing client bundle size, improving performance, and enabling direct database access. Use when fetching data server-side, reducing JavaScript bundle size, accessing databases directly in components, implementing streaming with Suspense, creating layouts that only render once, optimizing Core Web Vitals, or building SEO-friendly applications with server-first architecture.
Use when: Building Next.js 13+ apps, optimizing component rendering, managing server/client boundaries.
Server Components (default in App Router):
Client Components ('use client'):
// ✅ Server Component fetches data
// app/page.tsx
import { ClientComponent } from './ClientComponent';
export default async function Page() {
const data = await fetchData(); // Server-side
return (
<div>
<h1>Server Rendered: {data.title}</h1>
<ClientComponent initialData={data} />
</div>
);
}
// ✅ Client Component handles interactivity
// app/ClientComponent.tsx
'use client';
export function ClientComponent({ initialData }) {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// ✅ Client Component with Server Component children
'use client';
export function ClientLayout({ children }: { children: React.ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
{isOpen && children}
</div>
);
}
// Usage - children can be Server Components!
<ClientLayout>
<ServerDataComponent /> {/* Stays on server */}
</ClientLayout>
Only use 'use client' when you need:
Remember: Keep components server-side by default. Only add 'use client' when necessary for interactivity.