Server-rendered React pages
Improve the initial page experience by sending rendered HTML before client JavaScript finishes loading.
Zustand · Const
SSR hydration
SSR renders a React app to HTML on the server, while hydration makes that markup interactive in the browser. The server and client must render matching output to avoid hydration errors.
How it works
SSR first renders the application into HTML on the server. The browser then calls React's hydrateRoot with the matching application tree, turning that static markup into an interactive client app; the server and client must produce identical output to avoid hydration errors.
Syntax
ReactDOMClient.hydrateRoot(document, <App />)Key points
- SSR creates the initial HTML representation on the server before the browser receives it.
- The browser receives static markup and converts it into an interactive application during hydration.
- Hydration attaches the client-side application behavior to the server-produced HTML snapshot.
- React's documented hydration API is
hydrateRoot. - A basic server-rendering setup uses Express, React, and the server rendering package.
Common mistakes
- Pass an equivalent React tree and data on both sides; differing output causes hydration errors.
- Avoid environment checks inside rendering logic when they make server and client output differ.
- Do not read browser-only APIs during server rendering unless the rendered result remains identical.
- Even whitespace surrounding the generated root markup can create a hydration mismatch.
Example: Hydrate the client app
import ReactDOMClient from 'react-dom/client'
import { App } from './app.tsx'
ReactDOMClient.hydrateRoot(document, <App />)Hydrate the server-rendered document with the same React app tree on the client.
When to use it
Client interactivity after SSR
Convert server-produced markup into a working client application after the page loads.
Hydration error prevention
Diagnose mismatches caused by different data or browser-only rendering logic.
Interview questions
QWhat is the difference between SSR and hydration?
SSR generates the initial component HTML on the server, and hydration makes that markup interactive in the browser. React's hydrateRoot is the documented client entry point.
Follow-up: What must be true for hydration to succeed? The client tree must produce the same output as the server tree, including rendered data and markup.
QWhich React APIs support the two phases?
Use react-dom/server to render the application on the server and react-dom/client to hydrate it on the client. The client invokes hydrateRoot(document, <App />) with the application tree.
Follow-up: Why are both packages needed? Server rendering and client hydration are separate phases with different runtime responsibilities.
QWhat commonly causes hydration errors?
Hydration errors occur when server and client rendering differ. Common causes include browser-only APIs, typeof window checks in render logic, different data, or extra whitespace around the root markup.
Follow-up: How should browser-dependent behavior be handled? Keep the initial rendered output consistent, then apply client-only behavior after hydration.
Related
hydrateRootreact-dom/serverreact-dom/clientSSRHydration