Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «SSR vs CSR». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Ключова відмінність

| Критерій | SSR (Server-Side Rendering) | CSR (Client-Side Rendering) |
|---|---|---|
| **Де рендериться HTML** | На **сервері** | У **браузері** користувача |
| **Що отримує користувач при першому запиті** | Готовий HTML-документ з уже вставленим контентом | Майже порожній HTML-файл + JS-бандл, який потім сам будує DOM |
| **Коли користувач бачить контент** | Майже одразу після відповіді сервера | Лише після завантаження і виконання JavaScript |
| **SEO-оптимізація** | Відмінна - пошуковики бачать повноцінний HTML | Погана без додаткових рішень (наприклад, prerendering) |
| **Навантаження** | Більше на сервер (він робить рендеринг) | Більше на клієнт (браузер робить усю роботу) |
| **Перше завантаження (TTFB)** | Довше (сервер генерує HTML) | Швидша відповідь, але контент з'являється пізніше |
| **Навігація між сторінками** | Часто потребує нових запитів до сервера | Швидка - усе працює як SPA без перезавантаження |
| **Складність розробки** | Вища (гідратація, спільний код для клієнта й сервера) | Простіша (усе лише на клієнті) |

---

## Як це виглядає на практиці

### **CSR:**

1. Користувач відкриває сайт.
2. Сервер повертає мінімальний HTML з `<div id="root"></div>`.
3. Браузер завантажує і виконує JS-бандл.
4. JS-код сам створює DOM і відображає контент.

```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. Користувач відкриває сайт.
2. Сервер запускає React-код, збирає готовий HTML.
3. Сервер надсилає HTML користувачу.
4. Браузер відображає сторінку одразу, потім "гідрує" її для інтерактивності.

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

---

## Підсумок:

- **SSR** = контент видно одразу, краще для SEO і UX, але складніше й дорожче за серверними ресурсами.
- **CSR** = швидша розробка й навігація, але повільніший перший рендер і гірший SEO без оптимізацій.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати293 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.