Angular 部分水和と SSR によるアプリケーションのパフォーマンスの向上

Angular 18 では、サーバーサイド レンダリング (SSR) と連携してアプリケーションのパフォーマンスを大幅に向上させる強力な技術である部分水和が導入されています。この記事では、部分水和の概念とその利点、そして Angular 17 で導入された遅延ビューをどのように活用するかについて詳しく説明します。

部分的な水分補給と SSR が重要な理由

従来の Angular アプリケーションは、すべての JavaScript を前もって読み込むときにパフォーマンスのボトルネックに悩まされることがよくあります。これは、特に大規模でパフォーマンスが重要なアプリケーションの場合、初期ロード時間に大きな影響を与える可能性があります。最初に読み込まれる JavaScript の量を戦略的に減らすことで、ユーザー エクスペリエンスを大幅に向上させることができます。

部分的な水分補給: SSR へのより賢いアプローチ

部分的なハイドレーションは、Angular 17 で導入された遅延可能なビューの基盤に基づいて構築されています。サーバー上で単純なプレースホルダーをレンダリングする代わりに、Angular は @defer でマークされた指定されたブロックのメイン コンテンツをレンダリングできるようになりました。仕組みは次のとおりです:

1. サーバー側レンダリング: サーバーは、コンポーネントを含む @defer ブロックとともにアプリケーションの重要なコンテンツをレンダリングします。
2. クライアント側のハイドレーション: アプリケーションがクライアントで実行されると、Angular は遅延コンポーネントに必要な JavaScript をダウンロードします。
3. 選択的アクティブ化: 遅延コンポーネントは、ユーザーのビューポートに入るなど、特定の条件を満たした場合にのみインタラクティブになります。

このアプローチにはいくつかの利点があります:

• 初期読み込み時間の短縮: 不要な JavaScript を延期することで、ユーザーは初期ページ読み込みが速くなります。
• 知覚の向上: コア機能が即座に利用できるため、アプリケーションの応答性が向上しました。
• データ消費量の削減: 初期 JavaScript ペイロードが小さいため、データ使用量が少なくなります。

部分的な水分補給を有効にする

部分水分補給の利用は簡単です。以下に例を示します:

{
  @defer (render on server; on viewport) {
    <my-deferrable-component></my-deferrable-component>
  }
}

この例では:

• my-deferrable-component はサーバー上でレンダリングされます。
• クライアント側の Angular は、コンポーネントに必要な JavaScript をダウンロードします。
• my-deferrable-component との対話は、ビューポートに入ったときにのみ発生し、レンダリングとパフォーマンスが最適化されます。

結論

部分的なハイドレーションにより、Angular 開発者はパフォーマンスが高く、ユーザーフレンドリーなアプリケーションを作成できるようになります。 Angular 18 は、ユーザー インタラクションや可視性に基づいてコンポーネントのハイドレーションを戦略的に延期することで、特に複雑でデータ量の多いアプリケーションにおいて、スムーズで応答性の高いユーザー エクスペリエンスを保証します。

以上がAngular 部分水和と SSR によるアプリケーションのパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。