Серверный рендеринг и мета-фреймворки

Основа с Middle

CSR, SSR, SSG и гидратация — где и когда собирается HTML; Next.js и аналоги.

Где собирать HTML — один из главных архитектурных выборов во фронтенде.

стратегия	как	плюсы	минусы
CSR	пустой HTML, всё рисует JS в браузере	просто, дешёвый хостинг	медленный первый показ, слабее SEO
SSR	HTML собирается на сервере на каждый запрос	быстрый первый показ, SEO	нужен сервер, нагрузка
SSG	HTML собирается при сборке	максимально быстро, CDN	данные устаревают до пересборки
ISR	статические страницы пересобираются по расписанию	компромисс	сложнее кэширование

Гидратация — браузер получает готовый HTML и «оживляет» его, навешивая обработчики. До её окончания страница видна, но не реагирует.

Next.js (React), Nuxt (Vue), SvelteKit, Astro — мета-фреймворки с маршрутизацией по файлам, SSR и SSG.
Серверные компоненты React выполняются только на сервере и не отправляют свой код в браузер.
Ошибки гидратации: HTML сервера не совпал с первым рендером клиента (даты, Math.random, window при рендере).
Выбор: личный кабинет за логином — CSR достаточно; публичные страницы для поиска — SSR или SSG.

Критерии освоения

Практика. Сделать на Next.js сайт, где лендинг статический, каталог пересобирается по времени, а личный кабинет рендерится на клиенте.

Проектирует рендеринг продукта — какие страницы как рендерятся, кэширование и нагрузка на сервер

Практика. Описать стратегию рендеринга и кэширования для интернет-магазина с оценкой нагрузки на сервер.

Что такое Core Web Vitals и как их улучшить? Middle
Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS …

Закрытая бета

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.