From React's side, what are server-side rendering and hydration, and what causes hydration mismatches?

Server-side rendering (SSR) means the server renders your components to HTML. Hydration is the browser step that makes that HTML interactive.

With SSR, the server uses APIs like renderToPipeableStream. Users see content before the JavaScript loads, and search crawlers get real markup. But the page is not interactive yet.

In hydration, hydrateRoot(container, <App />) renders the same tree in the browser. Instead of creating new DOM, React attaches to the existing server HTML and adds event handlers. Think of it as bringing a printed page to life. With Suspense boundaries, HTML can stream in pieces, and each part can hydrate on its own.

The client's first render must produce the same output as the server. Mismatches come from values that differ between the two environments:

• Date.now()
• Math.random()
• typeof window branches
• locale formatting, like dates and numbers
• invalid HTML nesting, like a <div> inside a <p>

React treats mismatches as bugs. It logs errors and may render part of the tree again on the client. To fix them, render client-only content after mount, in an effect. For text differences you cannot avoid, use suppressHydrationWarning.