Suggest an edit

Improve this article

Refine the answer for “What does the server do before sending HTML to the client?”. 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)

## The overall SSR request scenario

When a user opens a page (for example, `/products/42`), the server goes through **several stages** before it returns the finished HTML.

---

## 1. It accepts the HTTP request

The browser sends:

```javascript
GET /products/42 HTTP/1.1
Host: example.com
Accept: text/html
```

The server receives this request (through Node.js, Express, NestJS, Next.js, and so on)
and starts determining:

- which route (page) is needed,
- what data that page requires,
- which headers and cookies were sent (for example, a session token, language, theme).

---

## 2. It resolves the route and loads the app's page

The framework (for example, **Next.js**) determines:

- which **React component** is responsible for that path,
- which functions need to be called before rendering (`getServerSideProps`, `loadData`, and so on).

This is the routing and preparation stage.

---

## 3. It performs data fetching

Before rendering, the server does everything needed to fill the page with up-to-date content:

- Accesses the **database** (through Prisma, Sequelize, and so on),
- Makes **HTTP requests** to APIs,
- Reads **cookies / a JWT** to identify the user,
- May pull in **personalized data** (a cart, language, profile).

The results of these operations turn into props for the React components.

This is usually the most "expensive" stage in terms of time - every external API operation delays the HTML rendering.

---

## 4. It renders the React components on the server

Once the data is ready, the server calls the **React renderer**, for example:

```javascript
import { renderToString } from "react-dom/server";
const html = renderToString(<App pageProps={data} />);
```

At this step:

- React builds a virtual DOM tree,
- it "draws" the corresponding HTML code,
- it produces a string with the ready-made markup.

The result is an **HTML fragment** that can be inserted straight into the page template.

---

## 5. It assembles the HTML document

The server inserts the resulting markup into the overall layout:

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Product 42</title>
    <meta name="description" content="Premium linen shirt" />
    <link rel="stylesheet" href="/styles.css" />
    <script defer src="/client.js"></script>
    <script>
      window.__INITIAL_DATA__ = {...}; // passing data to the client
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

The server also:

- adds **SEO tags and metadata**,
- embeds the **initial data (initial state)**,
- links the **CSS / JS bundles**, so the client can hydrate the page.

---

## 6. (Optional) It compresses and caches the response

Before sending it, the server may:

- compress the HTML with **Gzip or Brotli**,
- put it in a **cache (Redis, CDN, edge cache)** to speed up subsequent requests,
- add headers like `Cache-Control`, `ETag`, `Set-Cookie`.

---

## 7. It sends the finished HTML to the client

Once everything is ready, the server sends the response:

```javascript
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Encoding: br
```

And the response body is the fully generated HTML.

---

## 8. What happens on the client afterward

- The browser **renders the HTML** -> the user sees the content.
- Then the JS bundles load.
- **Hydration** kicks in - client-side React attaches the logic and makes the page interactive.

---

## A visual representation of the SSR pipeline

```javascript
[Request] -> [Route resolution]
          -> [Data loading]
          -> [React render on the server]
          -> [Assembling HTML + data]
          -> [Compression and caching]
          -> [Response with HTML -> Browser]
```

---

## Conclusion

Before sending HTML to the client, **the server in SSR does a lot of work**:

1. It resolves the needed page and route,
2. It loads all the data,
3. It renders the React components into HTML,
4. It embeds the data and links the JS/CSS,
5. It compresses and sends the result.

> That is why SSR pages display content right away,
> but they need more resources and time on the server side.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.