Чем отличаются виды микрофронтендов и где они применяются?

Виды микрофронтендов различаются способом интеграции: build-time (сборка вместе), server-side (сборка на сервере) и run-time (Module Federation, iframe, web components). Применяются по требованиям к независимости и изоляции.

Виды по времени интеграции

Build-time integration

Микрофронтенды подключаются как пакеты (npm) и собираются вместе в один бандл:

• Плюсы: просто, единая сборка.
• Минусы: нет независимого деплоя (нужна пересборка всего), связанность версий.
• Когда: команды хотят разделения кода, но независимый деплой не критичен.

Run-time integration (главный подход)

Микрофронтенды загружаются и объединяются в браузере во время выполнения:

#### Module Federation (Webpack 5)

Динамическая загрузка модулей других приложений в рантайме, шаринг зависимостей:

• Плюсы: независимый деплой, шаринг общих библиотек.
• Когда: нужен независимый деплой команд, общий стек.

#### iframe

Полная изоляция (свой контекст, стили, JS):

• Плюсы: максимальная изоляция.
• Минусы: тяжёлая коммуникация, UX-ограничения.
• Когда: нужна сильная изоляция (легаси, разные стеки).

#### Web Components

Микрофронтенд как кастомный элемент (Shadow DOM для изоляции стилей):

• Когда: стек-независимость, изоляция стилей.

Server-side integration

Сборка фрагментов на сервере (SSI, Edge-side includes):

• Когда: важны SEO и быстрый первый показ.

Как выбирать

• Независимый деплой + общий стек → Module Federation.
• Сильная изоляция/разные стеки → iframe / Web Components.
• SEO/скорость → server-side.
• Простота без независимого деплоя → build-time.

Коротко для собеседования

Виды микрофронтендов: build-time (npm-пакеты, единая сборка — просто, но без независимого деплоя), run-time (Module Federation — независимый деплой и шаринг зависимостей; iframe/Web Components — сильная изоляция и стек-независимость), server-side (сборка фрагментов на сервере — SEO). Выбор по требованиям к независимости деплоя и изоляции.