แนวทางการประกอบไมโครฟรอนต์เอนด์

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

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

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.

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

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

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 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.

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

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

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.

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

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.