Этап 13 из 19 · ≈ 8 ч

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

Основа с 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.

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

Middle ≈ 8 ч

Объясняет CSR, SSR, SSG, ISR и гидратацию и выбирает стратегию для страницы
Исправляет ошибки гидратации

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

Senior ≈ 6 ч

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

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

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все

Что такое Core Web Vitals и как их улучшить?Middle

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера…

Полный разбор

Чем отличаются CSR, SSR, SSG и ISR?Middle

CSR — сервер отдаёт пустую страницу и JS, всё рисует браузер: просто, но медленный первый показ и слабое SEO; подходит для личных кабинетов. SSR — HTML собирается на сервере на каждый запрос: быстрый первый показ и SEO, свежие данные, но нужен сервер и время…

Полный разбор

Что такое гидратация и какие с ней бывают проблемы?Middle

После SSR браузер получает готовый HTML, но он «мёртвый»: гидратация — фреймворк загружает JS, повторно строит дерево компонентов и привязывает обработчики к существующей разметке. Проблемы: страница выглядит готовой, но не реагирует, пока JS не загрузился…

Полный разбор

Что такое SSR и гидратация и откуда берутся ошибки гидратации?Middle

SSR: сервер рендерит компоненты в HTML — пользователь сразу видит содержимое, поисковики его индексируют. Затем в браузере React гидратирует: загружает JS, сопоставляет его с готовым HTML и навешивает обработчики — до этого страница видна, но не интерактивна…

Полный разбор

Как спроектировать кэширование и стратегии рендеринга страниц в Next.js?Senior

Стратегии: статическая генерация при сборке — для неизменного контента; ISR (revalidate по времени) — статика, которая пересобирается в фоне; ревалидация по требованию (revalidateTag, revalidatePath после изменения данных) — свежесть без постоянного SSR…

Полный разбор

Что фронтенд-разработчику нужно знать про SEO?Junior

Поисковик должен получить содержимое страницы, понять его и оценить качество. Для этого: контент доступен в HTML без обязательного выполнения JS (SSR или статическая генерация для публичных страниц), уникальные title и description, один h1 и иерархия…

Полный разбор

Документация

Есть в картах: Frontend-разработчик React

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования