Server Components
All Next.js topics∙ Next.js
Server Components are React components rendered on the server. Their component code is not included in the browser JavaScript bundle. This lesson explains how it works, when to use it, how to implement it safely, and how to verify the result.
Syntax
export default async function Page() {
const users = await getUsers();
return <UserList users={users} />;
}Example
// Topic: Server Components
export default async function UsersPage() {
const response = await fetch('https://api.example.com/users');
const users = await response.json();
return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}Expected Output
A server-rendered list of users.Line-by-line
| Line | Meaning |
|---|---|
export default async function UsersPage() { | Exports the React component that Next.js renders for the route. |
const response = await fetch('https://api.example.com/users'); | Requests data on the server and waits for the response. |
const users = await response.json(); | Stores a value used later in the example. |
return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>; | Returns the response or interface produced by the function. |
} | Forms part of the component, server operation, or configuration shown above. |
Real-World Uses
- 1Server Components is useful for balancing initial speed, data freshness, SEO, caching, and browser interactivity.
- 2They can read server-side data and secrets directly, render HTML or a React payload, and pass serializable values to Client Components.
- 3A team should use it when the requirement matches its responsibility in rendering.
- 4It should fit the surrounding route, data, security, and deployment design instead of being added in isolation.
- 5A successful implementation is visible through fast initial content, correct freshness, small client bundles, and no hydration errors.
Common Mistakes
- 1Browser hooks, event handlers, and non-serializable props cannot be used directly across a Server-to-Client Component boundary.
- 2Copying an example without identifying which code runs on the server and which code reaches the browser.
- 3Handling only the happy path and forgetting loading, empty, invalid, unauthorized, and failed states.
- 4Adding client state or third-party libraries before confirming that built-in Next.js and browser features are insufficient.
- 5Skipping verification in a production build, where caching and runtime behavior can differ from development.
Best Practices
- 1Keep components on the server by default and introduce a Client Component only at the smallest boundary that needs state, events, effects, or browser APIs.
- 2Keep the owning route, component, server function, and validation responsibility easy to identify.
- 3Use server-side code for trusted data and secrets; send only the data required by interactive browser components.
- 4Make loading, empty, success, and error states explicit for the user.
- 5Confirm the page renders with JavaScript disabled, inspect the client bundle, and test every value passed into Client Components.
What it means
- 1Server Components are React components rendered on the server. Their component code is not included in the browser JavaScript bundle.
- 2The important question is not only what syntax to write, but what responsibility this feature owns.
- 3Its behavior should be understood in development, during a production build, and after deployment.
- 4Before implementing it, decide what input it receives, what result it produces, and how failure is shown.
How it works
- 1They can read server-side data and secrets directly, render HTML or a React payload, and pass serializable values to Client Components.
- 2Next.js uses file and component boundaries to decide routing, server execution, browser execution, and caching.
- 3Data should cross each boundary in a small, serializable, and validated form.
- 4The final result should remain understandable when a user refreshes the page or opens the URL directly.
Step-by-step approach
- 1Create the smallest route or component that demonstrates Server Components.
- 2Add one realistic input or data source and show the successful result.
- 3Add the most likely failure case and display a useful response.
- 4Run this check: Confirm the page renders with JavaScript disabled, inspect the client bundle, and test every value passed into Client Components.
Production checklist
- 1Confirm server-only values and secrets never enter the browser bundle.
- 2Confirm direct URLs, refreshes, loading states, and errors behave correctly.
- 3Confirm caching and revalidation match the required data freshness.
- 4Measure the result using fast initial content, correct freshness, small client bundles, and no hydration errors.
Quick Summary
- Server Components are React components rendered on the server. Their component code is not included in the browser JavaScript bundle.
- They can read server-side data and secrets directly, render HTML or a React payload, and pass serializable values to Client Components.
- Recommended approach: Keep components on the server by default and introduce a Client Component only at the smallest boundary that needs state, events, effects, or browser APIs.
- Main mistake to avoid: Browser hooks, event handlers, and non-serializable props cannot be used directly across a Server-to-Client Component boundary.
- Verify it by doing the following: Confirm the page renders with JavaScript disabled, inspect the client bundle, and test every value passed into Client Components.
Interview Questions
Q1. What is Server Components?
Answer: Server Components are React components rendered on the server. Their component code is not included in the browser JavaScript bundle.
Q2. How does Server Components work in Next.js?
Answer: They can read server-side data and secrets directly, render HTML or a React payload, and pass serializable values to Client Components.
Q3. When should you use Server Components?
Answer: Use it for balancing initial speed, data freshness, SEO, caching, and browser interactivity, when that responsibility belongs inside the Next.js application.
Q4. What is a common mistake with Server Components?
Answer: Browser hooks, event handlers, and non-serializable props cannot be used directly across a Server-to-Client Component boundary.
Q5. How would you test Server Components?
Answer: Confirm the page renders with JavaScript disabled, inspect the client bundle, and test every value passed into Client Components. The result should demonstrate fast initial content, correct freshness, small client bundles, and no hydration errors.
Quiz
Which approach is best when implementing Server Components?