Next.js › Client Components & Hydration

What causes a hydration mismatch error, and how can you fix one?

Intermediate

Answer

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