mediumFrontend

What is hydration in Next.js and what causes a hydration error?

Q: What is hydration in Next.js and what causes a hydration error?

**TL;DR.** **Hydration** is when React **attaches event handlers and state** to the server-rendered HTML on the client, making the static markup interactive. A **hydration error** occurs when the **client render differs** from the server HTML — e.g. using Date.now() , random values, or browser-only APIs during render — so the two trees don't match. server HTML static markup hydrate client

692 views

Understand the problem

Attaching React to server HTML and why mismatches break it.

nextjshydrationssrreact

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Avoiding a hydration mismatch

'use client';
import { useState, useEffect } from 'react';

export default function Clock() {
  const [time, setTime] = useState<string | null>(null);
  // ✅ compute browser-only value AFTER mount, not during render
  useEffect(() => setTime(new Date().toLocaleTimeString()), []);
  return <span suppressHydrationWarning>{time ?? 'loading…'}</span>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between build-time and runtime environment variables in Next.js?

What is Turbopack in Next.js and how does it compare to Webpack?