CSR, SSR, SSG, ISR — різниця між стратегіями рендерингу

В сучасних фронтенд-додатках існує кілька стратегій рендерингу. Вони визначають коли і де HTML-контент буде рендеритися: на клієнті, на сервері або заздалегідь.

CSR — Client-Side Rendering (Клієнтський рендеринг)

HTML завантажується порожнім, весь контент і логіка завантажуються через JavaScript на стороні клієнта.

Як працює CSR

Сервер повертає порожній HTML файл
JS-додаток ініціалізується в браузері
Дані завантажуються через API

Переваги CSR

Швидка реакція після завантаження
Відсутнє навантаження на сервер
Повний контроль на клієнті

Недоліки CSR

Погане SEO (якщо не використовується SSR/пререндеринг)
Повільний час до контенту
Потрібен JS для рендеринг

SSR — Server-Side Rendering (Серверний рендеринг)

HTML рендериться на сервері при кожному запиті. Користувач отримує вже згенеровану сторінку.

Як працює SSR

Клієнт робить запит → сервер генерує HTML
Після завантаження сторінка гідратується React-додатком

Переваги SSR

Відмінне SEO
Швидкий перший рендеринг контенту
Підходить для динамічного контенту

Недоліки SSR

Навантаження на сервер
Складніша архітектура
Затримка на перший запит

SSG — Static Site Generation (Статичне генерування)

HTML-сторінки генеруються під час збірки і розміщуються як статичні файли.

Як працює SSG

Під час збірки проекту (npm run build) генеруються HTML файли
Сервер просто віддає вже готові сторінки

Переваги SSG

Блискавична швидкість
Відмінне SEO
Майже нульове навантаження на сервер

Недоліки SSG

Контент не оновлюється без нової збірки
Не підходить для часто оновлюваних сторінок

ISR — Incremental Static Regeneration (Інкрементальне генерування)

Комбінація SSG + SSR: сторінки генеруються на льоту, але кешуються. Використовується в Next.js.

Як працює ISR

Спочатку віддається кешована версія сторінки
Якщо сторінка застаріла — перегенерується у фоновому режимі

tsx

export async function getStaticProps() {
  return {
    props: {},
    revalidate: 60, // сторінка перезбирається кожні 60 сек
  };
}

Переваги ISR

Швидкість SSG + свіжість SSR
Гнучкі оновлення контенту
Відмінно підходить для блогів, маркетплейсів

Недоліки ISR

Потрібно правильно налаштувати кеш і повторну перевірку

Таблиця порівняння

Характеристика	CSR	SSR	SSG	ISR
Де рендериться?	У браузері	На сервері	Під час збірки	На сервері + кеш
SEO	Погане	Відмінне	Відмінне	Відмінне
Швидкість завантаження	Середня	Середня	Дуже швидка	Швидка
Підходить для	SPA, панелі управління	Новинні сайти	Блоги, маркетинг	Електронна комерція, контент
Оновлення даних	Через API	При кожному запиті	Тільки під час збірки	Через повторну перевірку

Висновок:

CSR — для динамічних додатків, де SEO не є важливим (адмін-панелі, особисті кабінети).
SSR — для динамічних публічних сторінок.
SSG — для маркетингових лендінгів, блогів.
ISR — найкраще з обох світів: швидкість і свіжість.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань