Що таке SSR і навіщо він потрібен?

Next.jsMiddle~1 хв читання

SSR (Server-Side Rendering) - це підхід, при якому HTML-сторінка формується на сервері, а в браузер приходить вже готова розмітка, а не порожній <div id="root">.

Простіше:

CSR - спочатку JS, потім контент SSR - спочатку контент, потім JS

Як це працює

На прикладі Next.js:

Користувач запитує сторінку
Сервер виконує React-код
Генерує готовий HTML
Браузер одразу відображає сторінку
JS «гідратує» її -> з'являється інтерактивність

Як працює без SSR (CSR)

txt

HTML → порожньо
↓
завантажується JS
↓
виконується React
↓
з'являється контент

повільний First Paint погано для SEO порожній екран на слабких пристроях

Як працює з SSR

txt

HTML → вже є контент
↓
сторінка видна одразу
↓
підключається JS
↓
інтерактивність

швидко SEO-friendly кращий UX

Навіщо потрібен SSR

1. SEO

Пошукові системи отримують:

заголовки
текст
мета-теги

А не порожню сторінку.

2. Швидкий First Contentful Paint

Користувач одразу бачить контент:

сторінки відчуваються швидшими
вища конверсія
менше відмов

3. Передбачуваний UX

працює навіть при повільному інтернеті
менше «білих екранів»
краще для мобільних пристроїв

4. Підходить для динамічних даних

SSR ідеально підходить, коли:

дані залежать від запиту
потрібен auth / cookies
контент персоналізований

Коли SSR використовувати НЕ варто

адмінки суто інтерактивні застосунки сторінки без SEO-цінності

Там простіше і дешевше CSR.

SSR в Next.js

У Next.js SSR вмикається типово для сторінок із серверними даними:

Server Components
fetch() на сервері
доступ до БД і cookies
рендер на кожен запит

Коротка відповідь для співбесіди

SSR - це серверний рендеринг React-застосунку, при якому HTML формується на сервері. Він потрібен для покращення SEO, пришвидшення першої відмальовки та підвищення якості користувацького досвіду.

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

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

Premium

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