Вопрос «чем SSR отличается от SSG и что такое гидрация» задают почти на каждом собесе middle и выше. Нужно понимать не только определения, но и цену каждого подхода: когда пользователь видит контент, когда может нажать кнопку и сколько стоит сервер.
Стратегии
CSR (Client-Side Rendering). Сервер отдаёт почти пустой HTML и бандл. Браузер скачивает JS, выполняет, грузит данные, рисует. Плюсы: простой хостинг (статика на CDN), дёшево. Минусы: пустой экран до загрузки JS, хуже SEO и LCP на слабых устройствах. Подходит для кабинетов и админок за логином.
SSR (Server-Side Rendering). HTML собирается на сервере на каждый запрос с актуальными данными. Пользователь быстро видит контент (хороший FCP и LCP), поисковик получает готовый HTML. Минусы: сервер считает каждый запрос, TTFB зависит от самых медленных данных, страница не интерактивна до гидрации.
SSG (Static Site Generation). HTML собирается один раз при сборке и раздаётся с CDN. Самый быстрый и дешёвый вариант. Минус: данные устаревают до следующей сборки, и сборка долгая, если страниц миллионы. Подходит для документации, блогов, лендингов.
ISR (Incremental Static Regeneration). Гибрид от Next.js: страница статическая, но перегенерируется в фоне по таймеру (revalidate) или по событию (revalidatePath, revalidateTag). Работает по схеме stale-while-revalidate: первый пришедший после истечения срока получает старую версию и запускает пересборку, следующие получают новую. Подходит для каталога товаров и статей.
Гидрация
После SSR или SSG в браузере уже есть HTML, но обработчиков событий нет. Гидрация это когда React загружает тот же код компонентов, заново строит дерево в памяти, сверяет его с готовым DOM и навешивает обработчики. До её окончания кнопки не работают: это разрыв между «увидел» и «может нажать».
Ошибка гидрации (hydration mismatch) возникает, когда HTML с сервера не совпадает с первым рендером на клиенте. Типичные причины: Date.now(), Math.random(), window или localStorage прямо в рендере, разный часовой пояс, невалидная вложенность тегов (<div> внутри <p>), расширения браузера, правящие DOM.
// Плохо: на сервере и клиенте разное время
<span>{new Date().toLocaleTimeString()}</span>
// Лучше: значение только на клиенте после монтирования
const [time, setTime] = useState<string | null>(null);
useEffect(() => setTime(new Date().toLocaleTimeString()), []);
Стриминг и Suspense
React 18+ умеет отдавать HTML по частям. Оболочка страницы уходит сразу, а медленные блоки, обёрнутые в <Suspense>, приходят позже в том же ответе и вставляются на место фолбэка. Плюс выборочная гидрация: части гидрируются независимо, и та, по которой пользователь кликнул, получает приоритет. В Next.js App Router файл loading.tsx это готовый Suspense вокруг страницы.
React Server Components
RSC (стабильны в React 19, основа App Router в Next.js) это компоненты, которые выполняются только на сервере. Их код не попадает в бандл, они могут напрямую читать базу или файлы и быть async. Клиентские компоненты помечаются директивой 'use client' на границе: всё, что они импортируют, уходит в браузер.
- Серверный компонент не может использовать
useState,useEffect, обработчики событий. - Серверный может рендерить клиентский и передать ему сериализуемые пропсы.
- Клиентский не может импортировать серверный, но может получить его как
children. 'use server'помечает не серверные компоненты, а Server Functions (раньше Server Actions): функции, которые клиент вызывает как RPC.
RSC это не замена SSR: SSR превращает дерево в HTML, а RSC решает, какой код вообще едет на клиент. В Next.js они работают вместе.
Islands и частичная гидрация
Astro и похожие фреймворки гидрируют только интерактивные «острова», остальная страница остаётся статическим HTML без JS. Хорошо для контентных сайтов.
Как выбирать
| Страница | Стратегия |
|---|---|
| Лендинг, документация | SSG |
| Карточка товара, статья | ISR или SSG + ревалидация по событию |
| Персональная лента, поиск с фильтрами | SSR со стримингом |
| Кабинет за логином | CSR или SSR, SEO не важно |
Что спросят на собесе
- Чем отличаются CSR, SSR, SSG и ISR? Плюсы и минусы.
- Что такое гидрация и почему возникает hydration mismatch?
- Как работает стриминг SSR и выборочная гидрация?
- Чем Server Components отличаются от SSR?
- Какую стратегию выберешь для интернет-магазина и почему?