Micro-frontends: integration styles, costs and when not to

HOW IT FITS TOGETHER

KEY TERMS

Composition point

Where independently built pieces meet: the bundler (packages), a proxy or edge worker (routes and fragments), the HTML (import maps, script tags) or a runtime loader (Module Federation, single-spa). It decides what can deploy independently and what fails at runtime instead of at build time.

Module Federation 2.0

Remotes publish an mf-manifest.json describing exposed modules and shared dependencies; hosts load them at runtime and negotiate shared singletons. 2.0 (stable in 2026) adds dynamic TypeScript type hints, a runtime plugin system, preloading, shared-dependency tree shaking, devtools and SSR via Modern.js, with plugins for webpack, Rspack, Rsbuild, Vite and others. The Next.js plugin is in maintenance mode and refuses to run with the App Router.

Shared dependencies and version skew

Two React copies on one page break hooks and context; one shared React means every team must run a compatible version. Singletons with requiredVersion ranges turn skew into a warning or failure you can see. Upgrades of shared majors become coordinated releases again, so keep the shared set small.

Routing ownership

Exactly one router owns the URL at each level: the shell maps path prefixes to micro-frontends, and each app owns routes beneath its prefix. Two routers listening to history without a contract produce double navigations and broken back buttons.

Cross-app communication

Prefer the URL for shareable state, a backend for durable state, and DOM CustomEvents with a versioned, typed contract for notifications. A shared global store recreates the coupling you split to escape and turns every refactor into a cross-team change.

Design consistency

Share design tokens and a component library (often web components or a framework package) rather than whole pages. Pin versions per micro-frontend and budget for visual drift between deploys.

Modular monolith frontend

One deployable app with enforced internal boundaries: per-team folders or packages, lint rules on imports, CODEOWNERS, and route-level lazy loading. It gives ownership and smaller bundles without runtime integration, and can be split later along the same seams.

IN YOUR STACK

// checkout/rsbuild.config.ts (remote)
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginModuleFederation } from "@module-federation/rsbuild-plugin";

const shared = { react: { singleton: true, requiredVersion: "^19.0.0" }, "react-dom": { singleton: true, requiredVersion: "^19.0.0" } };

export default defineConfig({
  plugins: [pluginReact(), pluginModuleFederation({
    name: "checkout",
    exposes: { "./Cart": "./src/Cart.tsx" },
    shared,
  })],
});

// shell/rsbuild.config.ts (host): same imports and shared map
export default defineConfig({
  plugins: [pluginReact(), pluginModuleFederation({
    name: "shell",
    remotes: { checkout: "checkout@https://checkout.example.com/mf-manifest.json" },
    shared,
  })],
});

// shell/src/routes.tsx: const Cart = lazy(() => import("checkout/Cart"));

<script type="importmap">
{
  "imports": {
    "@acme/checkout": "https://cdn.example.com/checkout/4.12.0/app.js",
    "@acme/search": "https://cdn.example.com/search/2.3.1/app.js",
    "@acme/platform/": "https://cdn.example.com/platform/1.8.0/"
  }
}
</script>
<main id="outlet"></main>
<script type="module">
  // Each micro-frontend exports mount(el, props) and unmount(el).
  const routes = { "/checkout": "@acme/checkout", "/search": "@acme/search" };
  const outlet = document.getElementById("outlet");
  let current = null;
  async function route() {
    const prefix = Object.keys(routes).find((p) => location.pathname.startsWith(p));
    await current?.unmount(outlet);
    current = prefix ? await import(routes[prefix]) : null; // resolved via the map
    await current?.mount(outlet, { basePath: prefix });
  }
  addEventListener("popstate", route);
  route();
</script>

import { createRoot, type Root } from "react-dom/client";
import { CheckoutApp } from "./CheckoutApp";

class CheckoutMicroApp extends HTMLElement {
  static observedAttributes = ["cart-id", "base-path"];
  #root: Root | null = null;
  connectedCallback() {
    this.#root = createRoot(this); // light DOM: inherits the shell's tokens and fonts
    this.#render();
  }
  attributeChangedCallback() { if (this.#root) this.#render(); }
  disconnectedCallback() {
    const root = this.#root; this.#root = null;
    queueMicrotask(() => root?.unmount()); // the host may be mid-render
  }
  #render() {
    this.#root?.render(<CheckoutApp
      cartId={this.getAttribute("cart-id") ?? ""}
      basePath={this.getAttribute("base-path") ?? "/checkout"}
      onOrderPlaced={(orderId: string) => this.dispatchEvent(
        new CustomEvent("checkout:order-placed", { detail: { orderId }, bubbles: true, composed: true }))}
    />);
  }
}
if (!customElements.get("checkout-app")) customElements.define("checkout-app", CheckoutMicroApp);

// next.config.js of the main zone: serves / and routes other zones
/** @type {import('next').NextConfig} */
module.exports = {
  async rewrites() {
    return [
      { source: "/blog", destination: `${process.env.BLOG_DOMAIN}/blog` },
      { source: "/blog/:path+", destination: `${process.env.BLOG_DOMAIN}/blog/:path+` },
      { source: "/blog-static/:path+", destination: `${process.env.BLOG_DOMAIN}/blog-static/:path+` },
    ];
  },
};

// next.config.js of the blog zone: a normal Next.js app with app/blog/...
/** @type {import('next').NextConfig} */
module.exports = {
  assetPrefix: "/blog-static", // its /_next assets must not collide with the main zone
  experimental: {
    serverActions: { allowedOrigins: ["www.example.com"] }, // the user-facing origin
  },
};

// Links into another zone are plain <a href="/blog">, not <Link>.

// @acme/platform-events: a tiny contract package, versioned like a public API
export type PlatformEvents = {
  "cart:updated": { cartId: string; itemCount: number };
  "auth:signed-out": { reason: "user" | "expired" };
};

export function emit<K extends keyof PlatformEvents>(type: K, detail: PlatformEvents[K]) {
  window.dispatchEvent(new CustomEvent(type, { detail }));
}

export function on<K extends keyof PlatformEvents>(
  type: K,
  handler: (detail: PlatformEvents[K]) => void,
): () => void {
  const listener = (event: Event) => handler((event as CustomEvent<PlatformEvents[K]>).detail);
  window.addEventListener(type, listener);
  return () => window.removeEventListener(type, listener);
}

// checkout micro-app
emit("cart:updated", { cartId: "c_42", itemCount: 3 });

// header micro-app (React): subscribe on mount, unsubscribe on unmount
// useEffect(() => on("cart:updated", ({ itemCount }) => setBadge(itemCount)), []);

// root-config.js: the only code that knows every application
import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@acme/navbar",
  app: () => import("@acme/navbar"), // resolved through an import map
  activeWhen: () => true, // always mounted
});

registerApplication({
  name: "@acme/checkout",
  app: () => import("@acme/checkout"),
  activeWhen: ["/checkout", (location) => location.pathname.startsWith("/cart")],
  customProps: (name, location) => ({ getAccessToken: () => auth.getAccessToken() }),
});

const auth = { getAccessToken: async () => (await fetch("/session")).json().then((s) => s.token) };

start({ urlRerouteOnly: true });

// @acme/checkout entry: export lifecycles (single-spa-react generates them)
// export const { bootstrap, mount, unmount } = singleSpaReact({ React, ReactDOMClient, rootComponent: Root });

WHEN TO REACH FOR WHAT

WHERE IT BITES

• Splitting by technical layer or by component instead of by business capability and route. Micro-frontends that must change together on every feature are a distributed monolith with extra network hops.
• Shipping several copies of React, a design system and date libraries: the payload grows with every team. Measure total JS per route and set a budget before adding a remote.
• A shared global store (one Redux instance across apps). It reintroduces the coupling the split was meant to remove; share the URL, events and backend state instead.
• Testing only in isolation. A remote can pass its own CI and still break the shell through a shared-version mismatch, CSS leakage or a renamed event; run contract tests and a composed smoke test on every remote deploy.
• No fallback when a remote fails to load: an outage of one team's CDN blanks the whole app unless each remote sits behind an error boundary with a degraded view.
• Global CSS from one app restyling another. Scope styles (CSS modules, prefixes, cascade layers or shadow DOM) and share only design tokens.

WHEN IT BREAKS IN PRODUCTION

• The team wants microservices too early

SOURCES

• Micro Frontends (martinfowler.com) (opens in new tab)Checked 2026-10-11
• Rsbuild: Module Federation (opens in new tab)Checked 2026-10-11
• Module Federation 2.0 stable announcement (opens in new tab)Checked 2026-10-11
• Next.js: Multi-zones (opens in new tab)Checked 2026-10-11
• single-spa: API (opens in new tab)Checked 2026-10-11
• MDN: <script type="importmap"> (opens in new tab)Checked 2026-10-11