Suggest an edit

Improve this article

Refine the answer for “SSR vs CSR”. 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 key difference

| Criterion | SSR (Server-Side Rendering) | CSR (Client-Side Rendering) |
|---|---|---|
| **Where HTML is rendered** | On the **server** | In the user's **browser** |
| **What the user gets on the first request** | A ready HTML document with content already inserted | An almost empty HTML file + a JS bundle that then builds the DOM itself |
| **When the user sees content** | Almost immediately after the server responds | Only after JavaScript loads and runs |
| **SEO optimization** | Excellent, search engines see full HTML | Poor without extra solutions (for example, prerendering) |
| **Load** | Mostly on the server (it does the rendering) | Mostly on the client (the browser does all the work) |
| **First load (TTFB)** | Longer (the server generates HTML) | Faster response, but content appears later |
| **Navigation between pages** | Often needs new requests to the server | Fast, everything works like an SPA with no reload |
| **Development complexity** | Higher (hydration, shared code for client and server) | Simpler (everything is on the client only) |

---

## What this looks like in practice

### **CSR:**

1. The user opens the site.
2. The server returns a minimal HTML with `<div id="root"></div>`.
3. The browser downloads and runs the JS bundle.
4. The JS code creates the DOM itself and renders the content.

```javascript
// index.html
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
```

```javascript
// main.js
ReactDOM.render(<App />, document.getElementById('root'));
```

---

### **SSR:**

1. The user opens the site.
2. The server runs the React code and builds the ready HTML.
3. The server sends the HTML to the user.
4. The browser renders the page immediately, then "hydrates" it for interactivity.

```javascript
// server
const html = ReactDOMServer.renderToString(<App />);
res.send(`<html><body><div id="root">${html}</div></body></html>`);
```

---

## Summary:

- **SSR** = content is visible immediately, better for SEO and UX, but more complex and more expensive in server resources.
- **CSR** = faster development and navigation, but a slower first render and worse SEO without optimizations.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.