Suggest an edit

Improve this article

Refine the answer for “What is SSR?”. 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)

**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);
```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.