Server Components
Default App Router execution model. Server Components run in a non-browser runtime (Node or Edge) and produce a serialized React Server Component (RSC / Flight) payload. This payload is streamed to the client and merged into the existing tree without shipping component logic to the browser.
export default async function Page() {
const res = await fetch("https://api.com", { next: { revalidate: 60 } });
const data = await res.json();
return <div>{data.title}</div>;
}✅ Good Practices
- Eliminates unnecessary client JavaScript for static or data-driven UI sections.
❌ Anti-Patterns
- Improper boundary placement increases server CPU load and network latency.
🧠 Decision
Use as the default execution environment. Move to Client Components only when interactivity, local state, or browser APIs are required.
📈 Scale Impact
Reduces client bundle size and hydration cost, improving LCP and startup time. Shifts compute and IO pressure to server infrastructure under high traffic.
⚖ Consistency Model
Per-request snapshot consistency model with server-authoritative tree generation.
🏗 Infrastructure Impact
Executes in Node or Edge runtime. CPU, memory, and IO shift to server layer; interacts with CDN and cache layers.
🔥 Failure Mode
Nested async fetches or implicit waterfalls increase TTFB and latency. Overloading server with heavy computation degrades global performance.