awesome-everything EN
↑ Обратно к восхождению

Браузер и фронтенд-рантайм

Стратегии рендеринга: SSG, SSR, ISR, streaming и гидратация

Суть Когда производится HTML — на билде, на запрос, по расписанию или кусками — и почему гидратация это отдельный шаг, оживляющий этот HTML.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на junior-высоте — поверхность
◷ 12 min

Пользователь тапает страницу товара. Сервер присылает готовый HTML — текст, цена, фото приходят меньше чем за секунду, страница выглядит готовой. Потом ничего не происходит при тапе «В корзину» ещё две секунды. Страница нарисована, но ещё не живая.

Стратегии рендеринга расходятся по таймингу. SSG (Static Site Generation) рендерит на билде — HTML это файл на CDN, мгновенно отдаваемый каждому посетителю. SSR (Server-Side Rendering) рендерит на каждый запрос — свежий HTML на каждый хит, но сервер работает на каждый запрос. ISR (Incremental Static Regeneration) — SSG, обновляющий себя по расписанию или по требованию. Streaming SSR шлёт HTML кусками по мере готовности каждой части, не дожидаясь всей страницы.

Пересекая все из них: гидратация — клиентский шаг, где React (или любой фреймворк) переисполняет дерево компонентов, чтобы прицепить обработчики событий и состояние к серверному HTML. Пока гидратация не закончится, страница выглядит готовой, но не реагирует на клики.

Четыре стратегии и один общий шаг

SSGHTML рендерится один раз на билде → файл на CDN → мгновенный TTFB для каждого. Заморожен на момент билда.
SSRHTML рендерится на каждый запрос → свежие, пользовательские данные. TTFB включает время серверного рендера + загрузку данных.
ISRSSG + правило ревалидации → отдать протухшее, пока регенерация идёт в фоне. stale-while-revalidate для страниц.
StreamСервер шлёт оболочку немедленно → медленные части стримятся по мере резолва границ Suspense.
Гидр.Клиент скачивает JS, переисполняет компоненты, цепляет обработчики. Происходит после прихода HTML независимо от стратегии.

Метафора ресторана. SSG — блюдо, приготовленное заранее и держащееся готовым — клиента обслуживают мгновенно, но еду сделали часы назад. SSR — готовка на заказ — свежо и точно правильно, но клиент ждёт. ISR — шведский стол, который повар обновляет время от времени — большей частью мгновенно, иногда лоток меняют. Streaming — вынос каждого блюда в момент готовности. И гидратация — часть после того, как тарелка приземлилась: еда выглядит идеально, но клиент всё ещё не может есть, пока не принесут приборы.

Почему зазор важен. Серверно-отрендеренная страница выглядит готовой почти мгновенно — текст и картинки прямо в HTML. Но если кликнуть по кнопке до окончания гидратации, ничего не происходит: картинка на экране, приложение ещё не работает. Зазор между «выглядит готовым» и «реально работает» — самая недопонятая вещь в современной производительности веба.

Расставь шаги по порядку

Серверно-отрендеренная страница идёт от запроса к работающей кнопке. Расставьте шаги по порядку.

  1. 1 Браузер запрашивает страницу
  2. 2 Сервер рендерит компоненты в HTML и шлёт его
  3. 3 Браузер рисует HTML — страница выглядит готовой
  4. 4 Браузер скачивает и запускает JavaScript-бандл
  5. 5 Гидратация: фреймворк цепляет обработчики — кнопки работают
Викторина

Серверно-отрендеренная страница выглядит полностью загруженной, но кнопка ничего не делает при клике. Самая вероятная причина?

Викторина

Какая стратегия рендерит HTML один раз, на билде, чтобы каждый посетитель получал готовый файл?

Закончи аналогию

В метафоре ресторана тарелка еды приходит, выглядя идеально, но клиент всё ещё не может есть, пока не доставят приборы. Еда — это серверный HTML. Что такое приборы — шаг, делающий страницу реально пригодной?

Посчитай

Грубое правило: гидратация дерева компонентов стоит примерно во сколько раз больше работы, чем начальный серверный рендер того же дерева?

раза
Числа стратегий рендеринга
SSG time-to-first-byte
Десятки мс (хит CDN)
SSR TTFB
Серверный рендер + загрузка данных
Сброс оболочки streaming
~50 мс
Стоимость гидратации
≈ 2× серверного рендера
Хороший INP (p75)
≤200 мс
Вспомните перед уходом
  1. 01
    Что означает SSG и когда рендерится HTML?
  2. 02
    Что такое гидратация и почему она происходит после того, как страница уже нарисована?
  3. 03
    Что такое ISR и чем он отличается от чистого SSG?
Итог

Четыре стратегии отвечают на вопрос, когда производится HTML: SSG на билде (мгновенный хит CDN, замороженный контент), SSR на запрос (свежо, серверная вычислительная цена на каждый хит), ISR по расписанию ревалидации (ограниченная протухлость, большей частью статическая доставка), и streaming SSR кусками (оболочка появляется за ~50 мс, медленные виджеты стримятся позже). Гидратация — отдельный, ~2×-ный шаг, гоняющийся независимо от стратегии: фреймворк переисполняет дерево компонентов на клиенте, чтобы прицепить обработчики событий к серверному HTML. Пока гидратация не завершилась для данного элемента, он видим, но мёртв. Зазор между первой отрисовкой и интерактивностью — это место, где живут баги «кликнул, ничего не произошло».

Связанные уроки
встречается в267
Продолжить восхождение ↑SSG, SSR, ISR, streaming и RSC — как работает каждая стратегия
хоткеи развернуть
поиск
K
пред. пьеса
k
след. пьеса
j
тиры
t
это меню
?
sources3
expand
  1. 01
  2. 02
  3. 03

Trademarks belong to their respective owners. Editorial reference only.