Какие архитектурные стили существуют
Что проверяют
Различаете ли вы уровни: как приложение отрисовывается и доставляется, как устроен код внутри, как он делится между командами. Следом обычно спрашивают, что вы выбрали бы для конкретного продукта, например каталога с SEO и личного кабинета.
Как отвечать
Разложите ответ на три уровня и на каждом назовите цену.
По способу рендеринга:
- MPA: сервер отдаёт готовую страницу на каждый переход. Просто и хорошо индексируется;
- SPA (CSR): одна HTML-оболочка, всё рисует JavaScript в браузере. Быстрые переходы, но дольше первый показ и сильнее зависимость от размера бандла;
- SSR: HTML собирается на сервере под запрос, затем гидратация. Next.js, Nuxt, Remix;
- SSG и ISR: страницы собираются заранее и пересобираются по таймеру или событию, дёшево раздаются с CDN;
- островная архитектура: статичная страница с отдельными интерактивными «островами», как в Astro. JavaScript грузится только туда, где он нужен;
- React Server Components: часть компонентов выполняется только на сервере и не попадает в бандл.
По организации кода: слоистая или feature-based структура, Feature-Sliced Design, однонаправленный поток данных (Flux, Redux, Zustand), компонентный подход с atomic design для UI-кита.
По масштабу команды: микрофронтенды через Module Federation или single-spa, когда независимые команды выпускают части интерфейса отдельно. Сюда же BFF, серверный слой под нужды конкретного клиента.
Закончите выбором: каталогу нужен SSR или ISR ради индексации и скорости первого экрана, личному кабинету за логином хватит SPA.
Где спотыкаются
Перечисляют микросервисы и serverless как стили фронтенда. Это устройство бэкенда, а фронтенд соприкасается с ними разве что через BFF или деплой SSR в функции.
Называют PWA архитектурой. PWA это набор возможностей (Service Worker, манифест, офлайн-режим), он совместим с любым способом рендеринга.
Говорят, что микрофронтенды нужны всем. Для одной команды это лишняя сборка, дублирование зависимостей и сложная отладка без выигрыша.