Форма состояния
Как проектировать форму клиентского состояния — локальное vs глобальное, колокация, производные данные и трейдоффы нормализации.
тема 06
Архитектура фронтенда
Форма state, fetching, границы монорепо, build pipelines.
Data fetching: сервер vs клиент, waterfall'ы, RSC и SWR-кэш
Место data fetching решает LCP. Server fetch сводит critical path к одному round-trip; client fetch после JS добавляет 2–4 последовательных trip'а. Waterfall'ы — тихие убийцы: Promise.all, RSC и TanStack Query кэш их лечат.
- 1 Где происходит data fetching — и почему это решает LCP
- 2 Fetch waterfall''''ы — диагностика и лечение через Promise.all
- 3 React Server Components и Suspense streaming
- 4 Клиентский кэш: TanStack Query, SWR и stale-while-revalidate
- 5 LCP, prefetch и race conditions в интерактивном fetching
- 6 Senior internals: RSC payload, слои кэша и production падения
- 7 Data fetching: тест с множественным выбором
- 8 Data fetching: тест с краткими ответами
- 9 Data fetching: чтение кода
- 10 Data fetching: схлопни critical path
Формы и доступность
Доступные паттерны форм: семантический HTML, ARIA-атрибуты, управление фокусом, сообщения об ошибках и клавиатурная навигация.
Дизайн-токены
Дизайн-токены как единый источник истины для цвета, отступов и типографики в компонентах и темах.
Монорепозиторий
Трейдоффы инструментов монорепозитория — Turborepo, Nx и changesets — и когда общие пакеты оправдывают накладные расходы.
Разбивка кода
Разбивка кода на уровне маршрутов и компонентов, ленивая загрузка и стратегии предзагрузки для низкого Time-to-Interactive.
Пайплайны сборки
Пайплайны сборки фронтенда: внутренности бандлеров, tree shaking, module federation и интеграция с CI/CD.
Собираем вместе
Итоговый урок: применение знаний о состоянии, формах, токенах, монорепо, разбивке и сборке в production-архитектуре фронтенда.
Теперь видно тему целиком.
Каждый юнит, от под землёй до орбиты. Архитектура фронтенда — одно созвездие в атласе; одолей следующую тему и оно загорится рядом.