Skip to main content

What is SSR?

ReactJunior~1 min read
Suggest an edit

Server-Side Rendering (SSR) is a way of rendering web pages in which the page's HTML is generated on the server, rather than in the user's browser.

In detail:

When a user requests a page:

  1. The browser sends a request to the server.
  2. The server runs the JavaScript code (for example, React or another framework) and generates ready-made HTML markup.
  3. The server returns the already "rendered" HTML to the user.
  4. After that, the browser loads the JS bundle and "hydrates" the page, making it interactive.

The core idea:

SSR lets the user see the content right away, without waiting for JavaScript to run on the client.

Advantages:

  • Faster first render (TTFB, LCP) - the page appears sooner.
  • Better SEO - search engines see the finished HTML.
  • Support for older devices - the page is visible even without full JS support.

Disadvantages:

  • More load on the server - rendering happens there.
  • Longer server response time - since it needs to run JS and assemble the HTML.
  • Harder to cache and to maintain client state.

Example:

Without SSR:

javascript
// The client renders after the JS loads ReactDOM.render(<App />, document.getElementById('root'));

With SSR:

javascript
// The server generates HTML const html = ReactDOMServer.renderToString(<App />); res.send(html);

Short Answer

Interview ready
Premium

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

Suggest an edit