Що таке SSR?
Server-Side Rendering (SSR) - це спосіб рендерингу веб-сторінок, при якому HTML-код сторінки формується на сервері, а не в браузері користувача.
Детально:
Коли користувач запитує сторінку:
- Браузер надсилає запит на сервер.
- Сервер виконує JavaScript-код (наприклад, React чи інший фреймворк), генерує готову HTML-розмітку.
- Сервер повертає вже "відрендерений" HTML користувачу.
- Після цього браузер завантажує JS-бандл і "гідрує" сторінку - робить її інтерактивною.
Основна ідея:
SSR дозволяє користувачу одразу побачити контент, не чекаючи виконання JavaScript на клієнті.
Переваги:
- Швидший перший рендер (TTFB, LCP) - сторінка відображається раніше.
- Краща SEO-оптимізація - пошуковики бачать готовий HTML.
- Підтримка старих пристроїв - сторінка видна навіть без повноцінної підтримки JS.
Недоліки:
- Більше навантаження на сервер - рендеринг виконується там.
- Довший час відгуку сервера - оскільки потрібно виконати JS і зібрати HTML.
- Складніше кешувати і підтримувати стан клієнта.
Приклад:
Без SSR:
javascript
// Клієнт рендерить після завантаження JS
ReactDOM.render(<App />, document.getElementById('root'));З SSR:
javascript
// Сервер генерує HTML
const html = ReactDOMServer.renderToString(<App />);
res.send(html);Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.