SSR vs CSR
Ключова відмінність
| Критерій | SSR (Server-Side Rendering) | CSR (Client-Side Rendering) |
|---|---|---|
| Де рендериться HTML | На сервері | У браузері користувача |
| Що отримує користувач при першому запиті | Готовий HTML-документ з уже вставленим контентом | Майже порожній HTML-файл + JS-бандл, який потім сам будує DOM |
| Коли користувач бачить контент | Майже одразу після відповіді сервера | Лише після завантаження і виконання JavaScript |
| SEO-оптимізація | Відмінна - пошуковики бачать повноцінний HTML | Погана без додаткових рішень (наприклад, prerendering) |
| Навантаження | Більше на сервер (він робить рендеринг) | Більше на клієнт (браузер робить усю роботу) |
| Перше завантаження (TTFB) | Довше (сервер генерує HTML) | Швидша відповідь, але контент з'являється пізніше |
| Навігація між сторінками | Часто потребує нових запитів до сервера | Швидка - усе працює як SPA без перезавантаження |
| Складність розробки | Вища (гідратація, спільний код для клієнта й сервера) | Простіша (усе лише на клієнті) |
Як це виглядає на практиці
CSR:
- Користувач відкриває сайт.
- Сервер повертає мінімальний HTML з
<div id="root"></div>. - Браузер завантажує і виконує JS-бандл.
- 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:
- Користувач відкриває сайт.
- Сервер запускає React-код, збирає готовий HTML.
- Сервер надсилає HTML користувачу.
- Браузер відображає сторінку одразу, потім "гідрує" її для інтерактивності.
javascript
// сервер
const html = ReactDOMServer.renderToString(<App />);
res.send(`<html><body><div id="root">${html}</div></body></html>`);Підсумок:
- SSR = контент видно одразу, краще для SEO і UX, але складніше й дорожче за серверними ресурсами.
- CSR = швидша розробка й навігація, але повільніший перший рендер і гірший SEO без оптимізацій.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.