Webpack/Vite federation — runtime share of remote modules across apps (`remoteEntry.js`).

Frontend Architecture

Module federation

<h2>Summary</h2>
<p>Independent deployable UI slices — shell loads remotes (iframe, module federation, web components). Shared design system and auth contract required. Failure isolation vs integration cost. Avoid duplicate React copies breaking hooks. Routing and CSS isolation are hard parts.</p>
<h2>Code example</h2>
<pre><code class="language-javascript">async function loadRemote(name) {
  const remote = await import(/* webpackIgnore: true */ `${REMOTE_URL}/${name}.js`);
  return remote.mount('#shell-slot');
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>Independent deployable UI slices — shell loads remotes (iframe, module federation, web components).</li>
<li>Shared design system and auth contract required.</li>
<li>Failure isolation vs integration cost.</li>
<li>Avoid duplicate React copies breaking hooks.</li>
<li>Routing and CSS isolation are hard parts.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/micro-frontends">Micro-frontends</a></li>
<li><a href="https://web.dev/articles/module-federation">Module federation</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-10-edge-rendering">Edge rendering</a></li>
<li><a href="/blogs/level-10-module-federation">Module federation</a></li>
</ul>


Independent deployable UI slices — shell loads remotes (iframe, module federation, web components).

Micro-frontend orchestration

Render at CDN edge close to user — lower TTFB, geo-distributed, limited runtime (Workers, Edge Functions).