When will you use this?

Learn this when you join a team on React 18/19 or Next.js — not required for your first todo app.

• New React apps may use Server Components and Suspense for faster first load.
• Next.js jobs expect you to know when code runs on server vs browser.

Real-world: match server HTML on client

Product page SSR outputs price ₹1,999. Client hydrate must match exactly — mismatch causes React hydration error and flicker.

Production-style code

// ❌ Hydration bug — Date differs server vs client
function LastUpdated() {
  return <p>Updated: {new Date().toLocaleString()}</p>;
}

// ✅ Fix — render relative time only on client after mount
function LastUpdated({ iso }) {
  const [label, setLabel] = useState(iso.slice(0, 10));
  useEffect(() => {
    setLabel(new Date(iso).toLocaleString());
  }, [iso]);
  return <p>Updated: {label}</p>;
}

What happens in production: Zero hydration warnings in production — SEO + interactivity without double render flash.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Server rendered: <button>Count: 0</button>
// Client hydrate — same structure required
// Bad: {typeof window !== 'undefined' && <Widget />} — mismatch

Line-by-line walkthrough

How it works (big picture)

• Server and first client render must match.
• Avoid Date.now() or random IDs in initial render unless same on both sides.

Do this on your computer

1. Compare server HTML with client first render.
2. Fix warnings in console about hydration mismatch.
3. Use useEffect for browser-only APIs.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Hydration and inspect component props/state.

Remember

Hydration connects SSR HTML to React. Server and client initial UI must match. Browser-only code goes in useEffect.

Common questions