Що таке SSR у Next.js?

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

SSR (Server-Side Rendering) у Next.js - це режим, за якого HTML сторінки генерується на сервері під час кожного запиту, а не заздалегідь на білді.

Як працює SSR

Користувач відкриває сторінку
Запит іде на сервер
Сервер:

виконує код сторінки
запитує дані (DB / API)
генерує HTML

Готовий HTML надсилається користувачу
Браузер гідратує сторінку (React оживає)

request → server render → HTML → browser → hydrate

Як вмикається SSR в App Router

SSR вмикається автоматично, якщо:

використовується динамічний fetch
є user-specific дані
вимкнено кешування

Явно:

export const dynamic = "force-dynamic";

Через `fetch`:

await fetch("https://api.example.com/data", {
  cache: "no-store", // ← SSR
});

Коли потрібен SSR

Використовуй SSR, якщо:

дані змінюються часто
є персоналізація
використовується auth
важливі SEO + актуальність

Приклади:

особистий кабінет
профіль користувача
адмінка
результати пошуку
задачі з правами доступу

Плюси SSR

завжди свіжі дані
SEO без компромісів
персоналізація
не потрібен client fetch для першого екрана

Мінуси SSR

повільніше, ніж SSG
навантаження на сервер
дорожче в інфраструктурі
вищий TTFB

SSR vs SSG

	SSR	SSG
Коли рендер	при запиті	при білді
Актуальність	Так	Ні
Швидкість	Висока	Дуже висока
Персоналізація	Так	Ні
Сервер	потрібен	не потрібен

SSR чудово поєднується зі Streaming

tsx

<Suspense fallback={<Skeleton />}>
  <UserStats />
</Suspense>

сторінка починає відображатися одразу
важкі блоки довантажуються пізніше
UX майже як у SSG

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

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

Premium

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