Пользователь тапает страницу товара. Сервер присылает готовый HTML — текст, цена, фото приходят меньше чем за секунду, страница выглядит готовой. Потом ничего не происходит при тапе «В корзину» ещё две секунды. Страница нарисована, но ещё не живая.
К концу урока ты будешь точно знать, почему существует это двухсекундное мёртвое окно и какая из четырёх стратегий отвечает за производство HTML, на который смотришь.
Стратегии рендеринга расходятся по таймингу. SSG (Static Site Generation) рендерит на билде — HTML это файл на CDN, мгновенно отдаваемый каждому посетителю. SSR (Server-Side Rendering) рендерит на каждый запрос — свежий HTML на каждый хит, но сервер работает на каждый запрос. ISR (Incremental Static Regeneration) — SSG, обновляющий себя по расписанию или по требованию. Streaming SSR шлёт HTML кусками по мере готовности каждой части, не дожидаясь всей страницы.
Пересекая все из них: гидратация — клиентский шаг, где React (или любой фреймворк) переисполняет дерево компонентов, чтобы прицепить обработчики событий и состояние к серверному HTML. Пока гидратация не закончится, страница выглядит готовой, но не реагирует на клики.
Ось «когда»: SSG рендерит один раз на билде; ISR — HTML с билда, ревалидируемый на запрос; SSR и streaming рендерят на запрос (streaming — кусками). Чем бы ни был произведён HTML, общий клиентский шаг гидратации — то, что наконец делает его интерактивным.
Четыре стратегии и один общий шаг
SSGHTML рендерится один раз на билде → файл на CDN → мгновенный TTFB для каждого. Заморожен на момент билда.
SSRHTML рендерится на каждый запрос → свежие, пользовательские данные. TTFB включает время серверного рендера + загрузку данных.
ISRSSG + правило ревалидации → отдать протухшее, пока регенерация идёт в фоне. stale-while-revalidate для страниц.
StreamСервер шлёт оболочку немедленно → медленные части стримятся по мере резолва границ Suspense.
Гидр.Клиент скачивает JS, переисполняет компоненты, цепляет обработчики. Происходит после прихода HTML независимо от стратегии.
Метафора ресторана. SSG — блюдо, приготовленное заранее и держащееся готовым — клиента обслуживают мгновенно, но еду сделали часы назад. SSR — готовка на заказ — свежо и точно правильно, но клиент ждёт. ISR — шведский стол, который повар обновляет время от времени — большей частью мгновенно, иногда лоток меняют. Streaming — вынос каждого блюда в момент готовности. И гидратация — часть после того, как тарелка приземлилась: еда выглядит идеально, но клиент всё ещё не может есть, пока не принесут приборы.
Почему зазор важен. Серверно-отрендеренная страница выглядит готовой почти мгновенно — текст и картинки прямо в HTML. Но если кликнуть по кнопке до окончания гидратации, ничего не происходит: картинка на экране, приложение ещё не работает. Зазор между «выглядит готовым» и «реально работает» — самая недопонятая вещь в современной производительности веба.
Расставь шаги по порядку
Completed
Серверно-отрендеренная страница идёт от запроса к работающей кнопке. Расставьте шаги по порядку.
1Браузер запрашивает страницу
2Сервер рендерит компоненты в HTML и шлёт его
3Браузер рисует HTML — страница выглядит готовой
4Браузер скачивает и запускает JavaScript-бандл
5Гидратация: фреймворк цепляет обработчики — кнопки работают
Викторина
Completed
Серверно-отрендеренная страница выглядит полностью загруженной, но кнопка ничего не делает при клике. Самая вероятная причина?
Heads-up Кнопка работает, когда гидратация завершается. Проблема — тайминг: JS, активирующий её, ещё не выполнился, не баг кода.
Heads-up Кнопка видна, значит HTML для неё пришёл. Не хватает клиентского JavaScript, делающего её интерактивной.
Heads-up Отсутствующий CSS сделал бы страницу криво выглядящей, не сделал бы видимую кнопку неотзывчивой.
Викторина
Completed
Какая стратегия рендерит HTML один раз, на билде, чтобы каждый посетитель получал готовый файл?
Heads-up SSR рендерит свежо на каждый запрос, не один раз на билде. SSG — та, что на билде.
Heads-up Гидратация — не стратегия рендеринга, а клиентский шаг, делающий уже отрендеренный HTML интерактивным.
Heads-up Стриминг про отправку HTML кусками — как HTML доставляется, не когда он отрендерен.
Закончи аналогию
Completed
В метафоре ресторана тарелка еды приходит, выглядя идеально, но клиент всё ещё не может есть, пока не доставят приборы. Еда — это серверный HTML. Что такое приборы — шаг, делающий страницу реально пригодной?
Answer
гидратация — Гидратация — клиентский шаг, где фреймворк скачивает свой JavaScript, переисполняет компоненты и цепляет обработчики событий и состояние к серверно-отрендеренному HTML. До гидратации страница — картинка, видимая, но инертная. После гидратации — живое приложение.
Посчитай
Completed
Грубое правило: гидратация дерева компонентов стоит примерно во сколько раз больше работы, чем начальный серверный рендер того же дерева?
раза
Answer · 2 раза
Гидратация примерно удваивает работу рендера: сервер отрендерил дерево один раз, чтобы произвести HTML, а клиент переисполняет то же дерево снова, чтобы прицепить интерактивность. Поэтому тяжело серверно-отрендеренная страница быстро появляется, но медленно отвечает — второй рендер гоняется на устройстве пользователя.
Числа стратегий рендеринга
SSG time-to-first-byte
Десятки мс (хит CDN)
SSR TTFB
Серверный рендер + загрузка данных
Сброс оболочки streaming
~50 мс
Стоимость гидратации
≈ 2× серверного рендера
Хороший INP (p75)
≤200 мс
Вспомните перед уходом
01
Что означает SSG и когда рендерится HTML?
02
Что такое гидратация и почему она происходит после того, как страница уже нарисована?
03
Что такое ISR и чем он отличается от чистого SSG?
Итог
Четыре стратегии отвечают на вопрос, когда производится HTML: SSG на билде (мгновенный хит CDN, замороженный контент), SSR на запрос (свежо, серверная вычислительная цена на каждый хит), ISR по расписанию ревалидации (ограниченная протухлость, большей частью статическая доставка), и streaming SSR кусками (оболочка появляется за ~50 мс, медленные виджеты стримятся позже). Гидратация — отдельный, ~2×-ный шаг, гоняющийся независимо от стратегии: фреймворк переисполняет дерево компонентов на клиенте, чтобы прицепить обработчики событий к серверному HTML. Пока гидратация не завершилась для данного элемента, он видим, но мёртв. Теперь, когда встретишь страницу, которая выглядит готовой, но игнорирует клики, — спроси себя: завершилась ли гидратация и не заставляет ли выбранная стратегия пользователя ждать без нужды?
Практика
Начни сверху. Задачи идут от простого к сложному: вспомнить факт, применить к случаю, затем senior-уровень. Открой, попробуй, потом открой ответ.