Vercel がマイクロフロントエンドを採用した方法 – Vercel

Vercel のメイン Web サイトは、かつては単一の大きな Next.js アプリケーションでしたが、Web サイトの訪問者とログインしたダッシュボードの両方にサービスを提供していました。しかし、Vercel が成長するにつれて、このセットアップには改善の余地があることが明らかになりました。ビルド時間が長くなり、依存関係の管理がより複雑になり、ワークフローの最適化が必要になりました。マイナーな変更により完全なビルドがトリガーされ、分離された開発と CI パイプラインに影響を与えました。

変化が必要であることは明らかでした。

アーキテクチャを再考することで、垂直型マイクロフロントエンドに移行し、開発エクスペリエンスがよりシンプルになり、プレビュー ビルド時間とローカル開発コンパイルが 40% 以上改善されました。他のマイクロフロントエンドのコードを削除して依存関係を合理化したことで、ページの重さも軽減され、エンドユーザーのパフォーマンスが向上しました。 コアウェブバイタル Largest Contentful Paint (LCP) や Interaction to Next Paint (INP) など。

Vercel のマイクロフロントエンドのサポートに基づいて構築されたこのオーバーホールにより、開発者エクスペリエンス (DX) が向上し、さらなる最適化が必要な領域が強調されました。大規模なアプリ移行のドッグフーディングを通じて、私たちの移行により、すべてのユーザーのためにプラットフォームを合理化する新しい方法が明らかになりました。このブログでは私たちのこれまでの道のりを共有すると同時に、全員のプロセスをスムーズに進めることができる場所も示しています。改良を続けるにつれて、単一アプリケーションの構築も高速化され、エンドユーザーのパフォーマンスを損なうことなく、さらに優れた DX を実現できるようになります。

どのようにやったかを見てみましょう。

ターボを活用する

私たちの最初のステップは、ローカル コンパイル、ビルド時間、CI ワークフローの改善に重点を置くことでした。 Vercel のモノレポは、 ターボレポ、次のような機能を使用してタスクを最適化できるようになりました。 バーセル リモート キャッシュ そして --affected。採用 ターボパック ローカル開発の速度が大幅に向上しました。

しかし、これらの改善を行っていくうちに、単一アプリ モデルも Vercel.com には不要であることがわかりました。アプリケーション内の論理分割により、ビルドやコンパイルのたびに不必要な作業が回避され、開発速度がさらに大幅に向上しました。

水平または垂直分割の重さを量る

マイクロフロントエンドは、大規模なアプリケーションをより小さな独立したユニットに分割する方法を提供し、製品分野やエンジニアリング チーム間での並行開発を可能にします。単一のアプリケーションは凝集していますが、マイクロフロントエンドは、アプリケーションと組織の両方が成長するにつれてスケーリングの問題に対処するのに役立ちます。主な戦略は 2 つあります。

• 垂直マイクロフロントエンド: パスごとに分割され、各ページが単一のアプリによって処理されます。

• 水平マイクロフロントエンド: 機能ごとに分割され、複数のアプリケーションが同じページで実行されます。

正解も不正解もありません。それぞれにトレードオフがあります。各アプローチは、ユースケースに応じて大きなメリットをもたらします。ルカ・メッツァリラさん マイクロフロントエンドに関する本 は、このトピックに関する優れたリソースです。

垂直分割により結合性が得られますが、異なるマイクロフロントエンドでサポートされているアプリケーション間を切り替えるときにナビゲーションが困難になる可能性があります。プリフェッチなどの技術や API など Chromium の投機ルール 役立ちますが、リソース使用量の増加やブラウザのサポートの制限などの制限があります。

水平分割では、複数のマイクロフロントエンドが同じページ上で動作するため、テスト、リリース、モニタリング、デバッグがより複雑になります。

採用しました 垂直マイクロフロントエンド– ユーザーがめったに交差しない論理セクションにアプリを分割することで、統合されたモノリポジトリを維持しながら、ビルド時間を短縮し、依存関係を簡素化します。

初期のテストでは、このアプローチによりビルド時間が半分になり、開発と運用の両方で所有権が合理化され、開発者が単一のアプリケーションで作業しているような感覚が得られることが示されました。

私たちの移行パス

次のステップは、開発やユーザー エクスペリエンスを中断することなく、モノリシック フロントエンド アプリをより小規模な垂直アプリケーションに移行することでした。私たちはアプリケーションを 3 つの主要な領域に分割しました。

• マーケティング

• ドキュメント

• ログインしたダッシュボード

これらの領域は当然ながら明確に区別されていました。ユーザーはこれらの間を頻繁に行き来することはなく、明確なユーザー インターフェイスを維持しているため、分離には理想的です。

私たちが使っているので、 Next.js、私たちが使用したのは、 Next.js マルチゾーン 垂直マイクロフロントエンドをサポートする機能。

増分移行は私たちにとって優先事項でした。私たちは、元のコードベースをフォークする代わりに、まったく新しいアプリケーションを作成することにしました。フォークは表面的には簡単に見えますが、リスクが生じる可能性があります。ヘッダー、フッター、デザイン システムなどの共有コンポーネントは、複数のリポジトリ間で複製して維持する必要があるため、同期の問題や潜在的な不一致が発生します。

モノリポジトリを継続し、コードを packages モノリポジトリ内では、共有コンポーネントの一貫性を確保しながら、重要な領域を徐々に分割していきました。のようなツール ターボレポ そして ディペンデンシー クルーザー このプロセスを簡素化するのに役立ちました。

使用する 機能フラグ、まだ存続しているモノリシック フロントエンド アプリから新しいマイクロフロントエンドにトラフィックを段階的にルーティングすることができました。これにより、古いコードを削除する前にリスクを最小限に抑え、パフォーマンスの向上を検証することができました。新しいページが少なくとも 1 週間エラーなくトラフィックを処理していたとき、既存のアプリケーションからコードを削除し、依存関係とビルド時間を段階的に短縮しました。

このモノレポ設定と垂直分割アプローチにより、私たちは自信を持ってコントロールできるようになりました。一貫性を維持し、ビルド時間を短縮し、アプリ開発をシンプルに保ちながら、非常に迅速に移行することができました。

学んだ教訓とトレードオフの管理

Vercel.com でのマイクロフロントエンドの導入が成功した後、同じアプローチを次のような他のサイトにも拡張しました。 2024 Next.js 会議 ページ。別のアプリケーションとして実行されます。 nextjs.org。このインフラストラクチャを使用すると、個別の領域を独立したアプリケーションに抽出でき、Next.js Conf チームと Next.js 開発チームが迅速かつ独立して反復できるため、開発サイクルをスピードアップできます。

とはいえ、課題もありました。私たちはいくつかの問題に遭遇し、特に次のようなツールを使用してパフォーマンスが低下しないように取り組みました。 スピードに関する洞察 現実世界の使用状況を監視し、 ヴェルセルツールバー レイアウトの変更とインタラクションのタイミングのアラート用。

私たちは、マイクロフロントエンドをローカルおよびプレビューでテストすることが困難であることを早い段階で認識していました。のような機能 ドラフトモード は正しく動作せず、ハード ナビゲーションなどのパフォーマンスのボトルネックが既知の問題でした。これらの問題を解決するために、Chromium の推測ルールを使用したプリフェッチやプリレンダリングなどの戦略を採用しました。

トレードオフを克服する例:

ハード ナビゲーションの影響を軽減するために、リンクが表示されるとすぐに最初のページのリソース (JavaScript と CSS) をダウンロードしてブラウザーのキャッシュを準備します。これは、ユーザーがナビゲートすると、それらのアセットがキャッシュからロードされることを意味します。ただし、ページでは HTML などの残りのアセットをレンダリングして取得する必要があります。

ユーザーが操作するとき (リンクをタップするなど)、ページを事前レンダリングすることでさらに一歩進めます。これにより、すべてのネットワーク要求と処理を含むページがバックグラウンドでレンダリングされるため、ユーザーが到着したときは瞬時に感じられます。このアプローチは、パフォーマンスとリソース使用量のバランスをとり、適切なタイミングでプリフェッチとプリレンダリングのみを行うことで、デバイスの過負荷を回避しながら、望ましいエクスペリエンスを提供します。

将来を見据えて

イテレーション速度の向上により、プラットフォーム全体でのマイクロフロントエンドの強化に力を入れています。私たちはルーティングの改良、プレビュー ワークフローの合理化、ハード ナビゲーション パフォーマンスの最適化に重点を置いています。また、マイクロフロントエンド開発を最初から最後まで改善するために、ダッシュボード エクスペリエンスを強化し、ワークフローの課題に対処しています。

垂直型マイクロフロントエンドへの移行により、開発速度が大幅に向上し、ビルド時間が短縮されました。チームは、共有パッケージを通じて連携を維持しながら、より独立して作業できるようになり、自律性と統合開発のバランスをとるシステムを構築します。

このアーキテクチャの改良を続ける中で、私たちはその可能性に興奮しています。マイクロフロントエンドを検討している場合でも、単一のアプリケーションに固執している場合でも、Vercel は可能な限り最高の開発者エクスペリエンスを保証することに尽力しています。