Micro Frontends Architecture with Module Federation · Урок

Подходы к композиции микрофронтендов

Изучите основные способы объединения микрофронтендов — во время сборки, на стороне сервера и на стороне клиента — и узнайте, когда применять каждый из них.

«Подходы к композиции микрофронтендов» — бесплатный урок Micro Frontends Architecture with Module Federation на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Micro Frontends Architecture with Module Federation, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

What Is Composition?

Composition is how independently built micro frontends combine into the single page a user sees — and your choice shapes performance and deployment.

Three Families of Composition

Composition strategies fall into three families: build-time, server-side, and client-side (run-time). Real systems often mix them.

Build-Time Composition

Build-time composition publishes each MFE as an npm package pulled into a container app. Simple, but it couples deploys — one change rebuilds the whole shell.

{
  "dependencies": {
    "@team/cart-mfe": "1.2.0",
    "@team/search-mfe": "0.9.1"
  }
}

Server-Side Composition

Server-side composition stitches MFE fragments into one HTML response, giving fast first paint and strong SEO since the browser gets a complete page.

Server-Side Includes (SSI)

A classic technique is Server-Side Includes: include directives the web server replaces with each MFE fragment before sending the page.

<!--#include virtual="/header-mfe" -->
<main><!--#include virtual="/catalog-mfe" --></main>
<!--#include virtual="/footer-mfe" -->

Edge-Side Composition

Edge-side composition assembles fragments at the CDN edge (via Edge Side Includes), pairing low latency with centralized stitching close to users.

Client-Side Composition

Client-side composition loads a thin shell, then fetches and mounts each MFE at run time. It is the most flexible approach and the base of Module Federation.

Client-Side with Web Components

One client-side technique wraps each MFE in a custom element (web component). The shell just places the tags and each MFE bootstraps itself.

<app-shell>
  <product-list></product-list>
  <shopping-cart></shopping-cart>
</app-shell>

Trade-offs at a Glance

Each approach trades off: build-time is simplest but weak on independence, server-side nails first load and SEO, client-side maximizes team autonomy.

Choosing an Approach

Choose by priority: server-side when SEO and first paint dominate, client-side for independent deploys and dynamic loading, build-time only for slow-changing teams.

Mixing Strategies

Mature systems mix strategies: server-side render the shell and above-the-fold content, then hydrate or lazy-load interactive MFEs client-side.

Quick Check

Test your understanding of composition.

Recap

Recap: composition can be build-time (coupled), server- or edge-side (great first paint and SEO), or client-side (max independence) — and real systems blend them.

Часто задаваемые вопросы

Урок «Подходы к композиции микрофронтендов» бесплатный?

Да — полный текст урока «Подходы к композиции микрофронтендов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Micro Frontends Architecture with Module Federation, подпишись на CoddyKit PRO. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.

Чему я научусь в уроке «Подходы к композиции микрофронтендов»?

Изучите основные способы объединения микрофронтендов — во время сборки, на стороне сервера и на стороне клиента — и узнайте, когда применять каждый из них. Ты практикуешь Micro Frontends Architecture with Module Federation с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Micro Frontends Architecture with Module Federation?

Предыдущий опыт не требуется. Micro Frontends Architecture with Module Federation на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Подходы к композиции микрофронтендов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Micro Frontends Architecture with Module Federation?

Да. Каждый урок Micro Frontends Architecture with Module Federation включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Micro Frontends Architecture with Module Federation