Серверний рендеринг

Що це означає

Серверний рендеринг, англійською server-side rendering або SSR, - це підхід, за якого сервер надсилає браузеру готовий HTML-код сторінки. Браузер може одразу її показати, а JavaScript завантажується потім, щоб додати інтерактивні елементи, наприклад форми чи фільтри.

Протилежність - рендеринг у браузері, коли сервер надсилає лише порожній каркас, а вміст з'являється після завантаження і запуску JavaScript. Такий сайт може здаватися повільним, особливо на слабких смартфонах, а деякі краулери пошуковиків і AI-сервісів взагалі не побачать контент.

Споріднений підхід - генерація сторінок заздалегідь під час збирання сайту, з якої виходить статичний сайт. Якщо SSR створює HTML за кожного запиту, статична генерація готує його один раз, і сервер лише віддає файли, що ще швидше й дешевше в експлуатації.

Як це працює на практиці

Для корпоративних сайтів, блогів і глосаріїв SSR або статична генерація важливі з погляду технічного SEO. Пошуковик отримує весь текст, заголовки і посилання вже в першій відповіді й не мусить чекати запуску скриптів, що спрощує індексацію.

Готовий HTML допомагає і з метриками Core Web Vitals, насамперед зі швидкістю відображення основного контенту. Користувач бачить текст раніше, сторінка менше стрибає, і це покращує враження від сайту та його позиції в пошуку.

Дедалі більшого значення SSR набуває для оптимізації під генеративні пошуковики. Мовні моделі та їхні краулери часто не запускають JavaScript, тому контент, що з'являється лише після рендерингу в браузері, може взагалі не потрапити до їхніх відповідей і цитат.

На що звернути увагу

SSR підвищує навантаження на сервер, адже він мусить збирати сторінку за кожного відвідування. Для сайту, контент якого змінюється рідко, часто вигідніша статична генерація або поєднання з кешуванням, яке знижує навантаження і витрати на хостинг.

Переходячи на новий сайт, наприклад з headless CMS, треба перевірити, що важливий контент справді є в HTML. Проста перевірка - відкрити вихідний код сторінки і знайти в ньому текст або скористатися інструментами пошуковика для перевірки рендерингу.