What does "SSR + Hydration" mean?

ReactJunior~3 min read

What SSR (Server-Side Rendering) is

SSR is the process where React components render on the server (Node.js), and the client (browser) receives ready-made HTML instead of an empty page.

Example (simplified):

Without SSR (a regular SPA):

javascript

Client -> receives index.html with an empty <div id="root"></div>
         v
bundle.js loads
         v
React renders the whole UI on the client

The user sees a "white screen" until the JS loads.

With SSR:

javascript

Server -> runs React and renders HTML (the page is already ready)
         v
Sends the ready-made HTML to the client

The browser shows content right away (a faster first paint). Then the JS connects, and the page becomes interactive. This "coming to life" is called Hydration.

What Hydration is

Hydration is the process where React on the client:

Takes the ready-made HTML that came from the server;
"Attaches" its event handlers and internal state to it;
Turns static markup into a live React application.

More simply:

SSR -> "building the house" (HTML) Hydration -> "connecting the electricity and water" (JS interactivity)

Example in React / Next.js

The server (Node.js) does:

javascript

import { renderToString } from 'react-dom/server';
import App from './App';

const html = renderToString(<App />);
return `
  <html>
    <body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body>
  </html>
`;

The client (browser) does:

javascript

import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

The server sent the ready-made HTML (renderToString);
The client "hydrated" (hydrateRoot) the same React code, restoring the state and attaching the handlers (onClick, onChange, and so on).

How React "knows" what to hydrate

When React calls hydrateRoot(), it compares the virtual component tree (Virtual DOM) with the existing HTML markup.

If the structure matches, React simply adds interactivity (no DOM changes at all).

If the structure differs, React emits a warning and re-renders that section (reconciliation).

Why SSR + Hydration are needed

Goal	Explanation
A faster first render (First Paint)	The user sees content right away, without waiting for JS to load
SEO optimization	Search engines see ready-made HTML
Improved UX	The page looks "ready" from the first milliseconds
HTML caching	Pages can be cached on a CDN
Gradual interactivity	React brings elements to life as loading progresses

SSR vs CSR vs SSG

Approach	Where the UI renders	When it is generated	Example
CSR (Client-Side Rendering)	In the browser	After the JS loads	Create React App
SSR (Server-Side Rendering)	On the server	On every request	Next.js `getServerSideProps`
SSG (Static Site Generation)	On the server (at build time)	Once	Next.js `getStaticProps`

In every case, Hydration is used the same way - JS "brings to life" an already ready-made HTML structure.

The visual sequence of SSR + Hydration

The client makes a request -> GET /page
The server renders HTML through renderToString() -> <div id="root"><h1>Hello!</h1></div>
The HTML is sent to the user right away -> The page is displayed (still without interactivity)
The JS bundle loads -> React calls hydrateRoot()
React links the DOM and the Virtual DOM -> Everything becomes interactive

Potential Hydration problems

Sometimes "hydration" can cause bugs:

Server markup does not match the client markup (for example, when using window, Math.random() in SSR);
Components depend on browser APIs (localStorage, viewport, and so on);
Inconsistent data between the server and the client.

Solutions:

Use useEffect for code that must run only on the client;
Avoid generating random data during SSR without fixing it;
In Next.js, you can use dynamic(() => import(...), { ssr: false }) for purely client-side components.

React 18 and "partial" hydration (Streaming SSR)

React 18 improved SSR - now it is possible to have:

Streaming SSR - HTML is sent in chunks as it becomes ready;
Selective Hydration - React "brings to life" only the needed parts of the UI as the JS loads.

This makes SSR applications even faster and more responsive.

Summary

Term	What it does
SSR (Server-Side Rendering)	Renders React components into HTML on the server
Hydration	"Brings that HTML to life" by adding interactivity on the client
Goal	Fast first render + SEO + interactivity
Implementation	`renderToString()` -> `hydrateRoot()`
Modern version	Streaming SSR + Selective Hydration (React 18)

In simple terms:

SSR makes the page visible instantly, and Hydration turns it from a "poster" into a "live application".

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.