Client Components & Hydration
5 questions found
What is a client component in Next.js and when should you use one?
Beginner
A client component is a piece of your app that runs in the browser and can use things like state, click handlers, and browser only APIs. You mark a file as a client component by adding a use client directive at the top, and you use them whenever your component needs interactivity that a server component cannot provide.
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
Real-world example
A like button on a social media post needs to be a client component because it responds instantly to clicks and updates its own state in the browser without reloading the page.
Common follow-ups: Why do you need to write use client at the top of the file?;Can a client component also fetch data from an API?
Server Components;Loading UI & Streaming with Suspense
What is hydration in the context of Next.js and React?
Beginner
Hydration is the process where React takes the static HTML that was already sent from the server and attaches interactivity to it in the browser, such as making buttons clickable and inputs responsive, without having to rebuild the entire page from scratch.
// Server sends static HTML first
// React then hydrates it in the browser to add interactivity
// This is handled automatically by Next.js
Real-world example
A product page shows fully rendered content immediately from the server, and then a moment later, the add to cart button becomes clickable once React finishes hydrating the page in the browser.
Common follow-ups: What happens if the server rendered HTML does not match what the client expects during hydration?;Why is hydration important for both performance and search engine visibility?
Rendering (SSR/SSG/ISR);Server Components
What causes a hydration mismatch error, and how can you fix one?
Intermediate
A hydration mismatch happens when the HTML rendered by the server does not match what the client renders during hydration, often caused by using values like the current date, random numbers, or browser only checks that differ between server and client. You fix it by making sure both environments produce the exact same initial output.
// Problematic: Date.now() differs between server and client
// Fix: only compute time-sensitive values after mounting on the client
useEffect(() => {
setCurrentTime(Date.now());
}, []);
Real-world example
A page displaying the current time initially showed a mismatch warning because the server rendered one timestamp and the client rendered a slightly different one a moment later, fixed by only setting the timestamp after the component mounts in the browser.
Common follow-ups: What browser APIs commonly cause hydration mismatches?;How do you debug a hydration mismatch warning in the console?
Rendering (SSR/SSG/ISR);Error Handling & Not Found Pages
How do client components and server components work together in the same page?
Intermediate
Server components can render client components as children, passing them data as props, while client components cannot directly import and render server components. This lets you keep most of your page as fast, lightweight server components and only add client components for the small interactive pieces that truly need them.
// app/page.js (Server Component)
import LikeButton from './LikeButton'; // Client Component
export default async function Page() {
const post = await getPost();
return <div><h1>{post.title}</h1><LikeButton postId={post.id} /></div>;
}
Real-world example
A blog post page renders the article title and content as a server component for fast loading, while passing the post id down to a small client component that handles the interactive like button.
Common follow-ups: Can you pass functions as props from a server component to a client component?;What data types can safely be passed between server and client components?
Server Components;Data Fetching
How can you minimize the amount of JavaScript sent to the browser when using client components?
Advanced
You keep client components as small and focused as possible, pushing interactivity down to the smallest piece of the tree that actually needs it, rather than marking an entire page or large section as a client component just because one small part needs interactivity.
// Instead of making the whole page a client component,
// isolate just the interactive button
function ProductPage() {
return (
<div>
<ProductDetails />
<AddToCartButton />
</div>
);
}
Real-world example
A product page keeps the description and images as server components and isolates only the small add to cart button as a client component, keeping most of the page's JavaScript footprint minimal.
Common follow-ups: How do you identify which parts of a page truly need to be client components?;What tools can measure how much JavaScript a page is sending to the browser?
Bundle Analysis & Code Splitting;Server Components