Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке SSR?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Server-Side Rendering (SSR)** - це спосіб рендерингу веб-сторінок, при якому HTML-код сторінки формується на сервері, а не в браузері користувача. **Ключове:** SSR дозволяє користувачу одразу побачити контент, не чекаючи виконання JavaScript на клієнті.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Server-Side Rendering (SSR)** - це спосіб рендерингу веб-сторінок, при якому **HTML-код сторінки формується на сервері**, а не в браузері користувача. --- ### Детально: Коли користувач запитує сторінку: 1. **Браузер надсилає запит** на сервер. 2. **Сервер виконує JavaScript-код (наприклад, React чи інший фреймворк)**, генерує готову HTML-розмітку. 3. Сервер **повертає вже "відрендерений" HTML** користувачу. 4. Після цього браузер **завантажує 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); ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.