Suggest an edit

Improve this article

Refine the answer for “What does "SSR + Hydration" mean?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. Takes the **ready-made HTML** that came from the server;
2. "Attaches" its **event handlers** and **internal state** to it;
3. 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

1. The client makes a request
-> `GET /page`

2. The server renders HTML through `renderToString()`
-> `<div id="root"><h1>Hello!</h1></div>`

3. The HTML is sent to the user right away
-> The page is displayed (still without interactivity)

4. The JS bundle loads
-> React calls `hydrateRoot()`

5. 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".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts809 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.