How does server-side rendering and hydration work in React?

Server rendering gives the user HTML before JavaScript loads, which improves first contentful paint and crawlability. Hydration is the client-side pass where React walks the existing DOM, matches it to the component tree, and attaches listeners. It is not the same as rendering the whole app again from scratch.

function Clock() {
  const [now, setNow] = useState(null);

  useEffect(() => {
    setNow(new Date());
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  if (!now) {
    return <time>Loading time...</time>;
  }

  return <time>{now.toLocaleTimeString()}</time>;
}

Common mismatch causes

• Reading window, localStorage or navigator during render
• Rendering Date.now() or Math.random() on both sides
• Branching on a value that differs between server and client
• Invalid HTML nesting that the browser repairs differently
• Using a different locale or time zone on the server

Move browser-only values into an effect or a client-only boundary, use useId for stable IDs across server and client, and render a deterministic initial state. Do not suppress the warning unless the difference is intentional and harmless; suppressHydrationWarning only covers the immediate element and is not a general fix.