Next.js redefines the boundaries between server and client. By moving the heavy lifting to the server, we achieve unprecedented performance.
In modern Next.js (App Router), components are divided into two distinct categories:
The default and high-performance standard for building modern apps.
Components marked with "use client" for interactivity.
Traditional React (CSR) requires the browser to download massive JS bundles before anything renders. Next.js moves as much work as possible to the server to reduce bundle sizes and speed up initial loads.
Server Components run only on the server and send static HTML to the client.
// Server Component by default
export default async function Page() {
const data = await fetch("https://api.example.com/data");
const json = await data.json();
return <div>{json.title}</div>;
}Defined with the "use client" directive to enable browser-side interactivity.
Server sends HTML + JS. Browser executes JS to make UI interactive (Hydration).
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Progress: {count}
</button>
);
}| Feature | Server Component | Client Component |
|---|---|---|
| Runs on | Server | Browser |
| JS sent to client | No | Yes |
| Interactivity | No | Yes |
| Data fetching | Direct (async) | via API / Hooks |
| Performance | High Initial | High Interactive |
| Bundle size | Zero / Small | Larger (React logic) |
Hydration is the process where React attaches event listeners to server-rendered HTML, making the UI interactive in the browser.
Occurs when the server-rendered HTML does not match the initial client-side render result.
The Common Culprit: Time
Calculating new Date().toLocaleTimeString() on the server vs client leads to different values, triggering a React warning.
"use client";
// Fix: Ensure client-only state happens after mount
useEffect(() => {
setTime(new Date());
}, []);Runs on every request. Ideal for high-dynamic content requiring fresh data on every page load.
Generated at build time. Extreme speed and zero infrastructure load at runtime.
Updates static pages in the background after deployment without a full site rebuild.
Sends UI in chunks. Users see the Header and Layout while slow-fetching content is loading.
// Composition Rule:
Server Comp can include Client Comp
Client Comp CANNOT include Server logic.