What does the server do before sending HTML to the client?

ReactMiddle~3 min read

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"><!-- the SSR HTML is inserted here --></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:

It resolves the needed page and route,
It loads all the data,
It renders the React components into HTML,
It embeds the data and links the JS/CSS,
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.

Short Answer

Interview ready

Premium

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