Client Components
All Next.js topics∙ Next.js
Client Components are components marked with "use client" that can use state, effects, event handlers, context, and browser APIs. This lesson explains how it works, when to use it, how to implement it safely, and how to verify the result.
Syntax
'use client';
export default function Counter() {}Example
// Topic: Client Components
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}Expected Output
Each click increases the displayed count.Line-by-line
| Line | Meaning |
|---|---|
'use client'; | Marks this module as a browser-interactive Client Component. |
import { useState } from 'react'; | Imports a component or framework API used by the example. |
export default function Counter() { | Exports the React component that Next.js renders for the route. |
const [count, setCount] = useState(0); | Creates browser state for an interactive component. |
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; | Runs the handler when the user selects the button. |
} | Forms part of the component, server operation, or configuration shown above. |
Real-World Uses
- 1Client Components is useful for balancing initial speed, data freshness, SEO, caching, and browser interactivity.
- 2They are still pre-rendered when possible, but their JavaScript is also sent to the browser so React can hydrate and handle interaction.
- 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
- 1Marking a layout or large page as a Client Component can pull its entire imported subtree into the browser bundle.
- 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
- 1Place "use client" as low in the component tree as practical so static and server-rendered content does not join the client bundle unnecessarily.
- 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.
- 5Test the interaction after hydration, check serializable props, and compare the JavaScript bundle before and after moving the client boundary.
What it means
- 1Client Components are components marked with "use client" that can use state, effects, event handlers, context, and browser APIs.
- 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 are still pre-rendered when possible, but their JavaScript is also sent to the browser so React can hydrate and handle interaction.
- 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 Client 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: Test the interaction after hydration, check serializable props, and compare the JavaScript bundle before and after moving the client boundary.
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
- Client Components are components marked with "use client" that can use state, effects, event handlers, context, and browser APIs.
- They are still pre-rendered when possible, but their JavaScript is also sent to the browser so React can hydrate and handle interaction.
- Recommended approach: Place "use client" as low in the component tree as practical so static and server-rendered content does not join the client bundle unnecessarily.
- Main mistake to avoid: Marking a layout or large page as a Client Component can pull its entire imported subtree into the browser bundle.
- Verify it by doing the following: Test the interaction after hydration, check serializable props, and compare the JavaScript bundle before and after moving the client boundary.
Interview Questions
Q1. What is Client Components?
Answer: Client Components are components marked with "use client" that can use state, effects, event handlers, context, and browser APIs.
Q2. How does Client Components work in Next.js?
Answer: They are still pre-rendered when possible, but their JavaScript is also sent to the browser so React can hydrate and handle interaction.
Q3. When should you use Client 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 Client Components?
Answer: Marking a layout or large page as a Client Component can pull its entire imported subtree into the browser bundle.
Q5. How would you test Client Components?
Answer: Test the interaction after hydration, check serializable props, and compare the JavaScript bundle before and after moving the client boundary. The result should demonstrate fast initial content, correct freshness, small client bundles, and no hydration errors.
Quiz
Which approach is best when implementing Client Components?