Що таке рендеринг на стороні сервера і коли він потрібен вашому проєкту

Коли користувач відкриває сайт браузер отримує HTML і відображає його на екрані. Але де і коли цей HTML генерується — це і є питання рендерингу. Відповідь на нього визначає швидкість завантаження, видимість в пошукових системах і складність архітектури. Три основні підходи — CSR, SSR і SSG — вирішують цю задачу по-різному і кожен підходить для конкретних сценаріїв.

CSR — Client-Side Rendering

При CSR браузер отримує майже порожній HTML файл і JavaScript бандл. JavaScript виконується в браузері, робить запити до API і будує інтерфейс динамічно на стороні клієнта. Саме так працює більшість SPA додатків побудованих на React, Vue або Angular без додаткових налаштувань.

Головна перевага CSR — це багатий інтерактивний досвід після першого завантаження. Навігація між сторінками відбувається миттєво без перезавантаження. Але є суттєві обмеження. Перше завантаження повільне — браузер повинен завантажити JavaScript, виконати його і тільки тоді відобразити контент. Пошукові роботи бачать порожній HTML що ускладнює SEO індексацію.

CSR підходить для додатків де SEO не критичний — адмін-панелі, внутрішні інструменти, SaaS продукти з закритим доступом.

SSR — Server-Side Rendering

При SSR HTML генерується на сервері при кожному запиті. Браузер отримує повністю готову сторінку і відображає її миттєво. Потім JavaScript завантажується і "гідратує" сторінку — додає інтерактивність.

Переваги очевидні: швидше перше завантаження, ідеальна індексація пошуковими системами, кращі показники Core Web Vitals. Але кожен запит вимагає обчислень на сервері що збільшує навантаження і вартість інфраструктури. При високому трафіку SSR потребує серйозної серверної потужності.

Next.js і Nuxt.js — найпопулярніші фреймворки які реалізують SSR для React і Vue відповідно. SSR підходить для публічних сайтів де важливий SEO і швидкість першого завантаження: медіа, eCommerce, маркетингові платформи.

SSG — Static Site Generation

SSG генерує HTML під час білду а не при кожному запиті. Готові HTML файли зберігаються на CDN і доставляються користувачам з мінімальною затримкою. Це найшвидший можливий варіант доставки контенту.

Обмеження SSG — статичний контент. Якщо дані змінюються часто сайт потрібно ребілдити щоб відобразити зміни. Сучасні фреймворки вирішують це через Incremental Static Regeneration — окремі сторінки можуть оновлюватися у фоновому режимі без повного ребілду.

SSG ідеально підходить для блогів, документації, лендингів і будь-якого контенту який змінюється нечасто.

Гібридні підходи

Сучасні фреймворки рідко обмежуються одним підходом. Next.js дозволяє обирати стратегію рендерингу на рівні окремих сторінок. Головна сторінка може бути статично згенерована, сторінка каталогу — SSR з кешуванням, адмін-панель — CSR. Це дає гнучкість оптимізувати кожну частину продукту незалежно.

Вибір підходу до рендерингу — це не технічна деталь а архітектурне рішення яке потрібно приймати на початку проєкту виходячи з вимог до SEO, очікуваного трафіку і характеру контенту.