翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

フレームワークとツール

Angular や Next.js などのフロントエンドフレームワークは不足していませんが、ほとんどはマイクロフロントエンドを念頭に置いて作成されていません。したがって、マイクロフロントエンドアーキテクチャの課題に対処するメカニズムが欠落することがあります。

フレームワークに関する一般的な考慮事項

このガイドは、個々のフレームワークを推奨したり比較したりすることを目的としていません。複数のマイクロフロントエンドが同じウェブアプリケーションページで実行されることが多いため、ロードとランタイムのパフォーマンスが主な懸念事項です。オーバーヘッドをできるだけ少なくするフレームワークを選択することが重要です。

フレームワークは、レンダリングレイヤーに基づいて分割されます。

フロントエンドアーキテクチャには、静的サイト生成 (SSG) などの他の機能が含まれます。ただし、SSG は 1 回のみ実行されます。マイクロフロントエンドは主に実行時に構成されるため、CSR と SSR が主なオプションです。

クライアント側のレンダリング

CSR には、次の 2 つの一般的なオプションがあります。

シングル SPA は、マイクロフロントエンドを作成するための軽量な選択肢です。同じページに複数のマイクロフロントエンドを作成し、依存関係の競合を回避するなど、マイクロフロントエンドアーキテクチャの最も一般的な課題を解決します。

モジュールフェデレーションは Webpack 5 が提供するプラグインとして開始され、さまざまなアーティファクトにわたる依存関係管理など、マイクロフロントエンドアーキテクチャにおける課題の大部分を解決します。モジュールフェデレーション 2.0 は、Rspack、webpack、esbuild とネイティブに連携し、現在は と連携します JavaScript。

フレームワークをまったく使用しないことを検討してください。caniuse.com によると、最新のブラウザは市場シェアが 98% で、カスタム要素などの機能をネイティブに提供しており、マイクロフロントエンドアプリケーションに適しています。必要に応じて、イベント伝達、国際化、またはその他の特定の懸念のために、カスタム要素を軽量ライブラリと組み合わせてください。

サーバー側のレンダリング

SSR 側では、2 つの主なオプションがより複雑です。