Blazor アプリ ホスティング モデル

Blazor アプリは、次のいずれかの方法でホストできます。

• WebAssembly でのブラウザーのクライアント側。
• ASP.NET Core アプリのサーバー側。

Blazor WebAssembly アプリ

Blazor WebAssembly アプリは、 WebAssembly ベースの .NET ランタイム上のブラウザーで直接実行されます。 Blazor WebAssembly アプリは、Angular や React などのフロントエンド JavaScript フレームワークと同様の方法で機能します。 ただし、JavaScript を記述する代わりに、C# を記述します。 .NET ランタイムは、アプリ アセンブリと必要な依存関係と共にアプリと共にダウンロードされます。 ブラウザープラグインや拡張機能は必要ありません。

ダウンロードしたアセンブリは、他の .NET アプリで使用する場合と同様に、通常の .NET アセンブリです。 ランタイムは .NET Standard をサポートしているため、 BlazorWebAssembly アプリで既存の .NET Standard ライブラリを使用できます。 ただし、これらのアセンブリは引き続きブラウザーのセキュリティ サンドボックスで実行されます。 一部の機能では、PlatformNotSupportedException がスローされる場合があります。たとえば、ファイル システムにアクセスしようとしたり、任意のネットワーク接続を開いたりする場合です。

アプリが読み込まれると、.NET ランタイムが開始され、アプリ アセンブリが指し示されます。 アプリのスタートアップ ロジックが実行され、ルート コンポーネントがレンダリングされます。 Blazor は、コンポーネントからレンダリングされた出力に基づいて UI の更新を計算します。 その後、DOM の更新が適用されます。

Blazor WebAssembly アプリは純粋にクライアント側で実行されます。 このようなアプリは、GitHub Pages や Azure Static Web サイト ホスティングなどの静的サイト ホスティング ソリューションにデプロイできます。 サーバー上で .NET は必要ありません。 アプリの一部へのディープ リンクには、通常、サーバー上のルーティング ソリューションが必要です。 ルーティング ソリューションは、要求をアプリのルートにリダイレクトします。 たとえば、このリダイレクトは、IIS の URL 書き換え規則を使用して処理できます。

Blazorとフルスタックの .NET Web 開発のすべての利点を得るには、ASP.NET Core を使用してBlazorWebAssembly アプリをホストします。 クライアントとサーバーの両方で .NET を使用することで、一貫した言語、フレームワーク、ツールのセットを使用して、コードを簡単に共有し、アプリを構築できます。 Blazor には、 BlazorWebAssembly アプリと ASP.NET Core ホスト プロジェクトの両方を含むソリューションを設定するための便利なテンプレートが用意されています。 ソリューションがビルドされると、 Blazor アプリからビルドされた静的ファイルは、フォールバック ルーティングが既に設定されている ASP.NET Core アプリによってホストされます。

Blazor サーバー アプリ

Blazorアーキテクチャの説明から、Blazorコンポーネントが出力をRenderTreeと呼ばれる中間抽象化にレンダリングすることを思い出してください。 その後、 Blazor フレームワークは、レンダリングされた内容と以前にレンダリングされたものを比較します。 相違点は DOM に適用されます。 Blazor コンポーネントは、レンダリングされた出力の適用方法から切り離されます。 そのため、コンポーネント自体は、UI を更新するプロセスと同じプロセスで実行する必要はありません。 実際、同じコンピューターで実行する必要もありません。

Blazor サーバー アプリでは、コンポーネントはブラウザーのクライアント側ではなくサーバー上で実行されます。 ブラウザーで発生する UI イベントは、リアルタイム接続を介してサーバーに送信されます。 イベントは、正しいコンポーネント インスタンスにディスパッチされます。 コンポーネントがレンダリングされ、計算された UI の差分がシリアル化され、DOM に適用されるブラウザーに送信されます。

Blazor Server ホスティング モデルは、AJAX と UpdatePanel コントロール ASP.NET 使用している場合は、よく知られていると思われる場合があります。 UpdatePanel コントロールは、ページ上のトリガー イベントに応答して、ページの部分的な更新の適用を処理します。 トリガーされると、 UpdatePanel は部分的な更新を要求し、ページを更新する必要なく適用します。 UI の状態は、 ViewStateを使用して管理されます。 Blazor サーバー アプリは、アプリがクライアントとのアクティブな接続を必要とする点で若干異なります。 さらに、すべての UI 状態はサーバー上で維持されます。 これらの違いを除けば、2 つのモデルは概念的に似ています。

適切な Blazor ホスティング モデルを選択する方法

Blazorホスティング モデルのドキュメントで説明されているように、ホスティング モデルのBlazorによってトレードオフが異なります。

Blazor WebAssembly ホスティング モデルには、次の利点があります。

• .NET サーバー側の依存関係はありません。 クライアントにダウンロードした後、アプリは完全に機能します。
• クライアントのリソースと機能は完全に活用されます。
• 作業はサーバーからクライアントにオフロードされます。
• ASP.NET Core Web サーバーは、アプリをホストするために必要ありません。 サーバーレス展開シナリオが可能です (CDN からアプリを提供するなど)。

Blazor WebAssembly ホスティング モデルの欠点は次のとおりです。

• ブラウザーの機能により、アプリが制限されます。
• 対応するクライアント ハードウェアとソフトウェア ( WebAssembly サポートなど) が必要です。
• ダウンロード サイズが大きく、アプリの読み込みに時間がかかります。
• .NET ランタイムとツールのサポートは成熟度が低くなります。 たとえば、 .NET Standard のサポートとデバッグには制限があります。

逆に、 Blazor Server ホスティング モデルには次の利点があります。

• ダウンロード サイズはクライアント側アプリよりもはるかに小さく、アプリの読み込み速度は大幅に向上します。
• このアプリでは、.NET 互換 API の使用など、サーバー機能を最大限に活用します。
• サーバー上の .NET はアプリの実行に使用されるため、デバッグなどの既存の .NET ツールは想定どおりに動作します。
• シンクライアントがサポートされています。 たとえば、サーバー側アプリは、 WebAssembly をサポートしていないブラウザーや、リソースに制約のあるデバイスで動作します。
• アプリの .NET/C# コード ベース (アプリのコンポーネント コードを含む) は、クライアントに提供されません。

Blazor サーバー ホスティング モデルの欠点は次のとおりです。

• UI の待機時間が長くなります。 すべてのユーザー操作には、ネットワーク ホップが含まれます。
• オフラインサポートはありません。 クライアント接続に失敗すると、アプリは動作を停止します。
• スケーラビリティは、多くのユーザーが使用するアプリでは困難です。 サーバーは、複数のクライアント接続を管理し、クライアントの状態を処理する必要があります。
• アプリを提供するには、ASP.NET Core サーバーが必要です。 サーバーレス展開シナリオは不可能です。 たとえば、CDN からアプリを提供することはできません。

上記のトレードオフの一覧は威圧的な可能性がありますが、ホスティング モデルは後で変更できます。 選択した Blazor ホスティング モデルに関係なく、コンポーネント モデルは 同じです。 原則として、どちらのホスティング モデルでも同じコンポーネントを使用できます。 アプリ コードは変更されません。ただし、抽象化を導入して、コンポーネントがモデルに依存しないようにすることをお勧めします。 抽象化により、アプリは別のホスティング モデルをより簡単に採用できます。

アプリをデプロイする

ASP.NET Web フォーム アプリは、通常、Windows Server コンピューターまたはクラスター上の IIS でホストされます。 Blazor アプリは次のことも可能です。

• IIS で静的ファイルとして、または ASP.NET Core アプリとしてホストされます。
• ASP.NET Core の柔軟性を活用して、さまざまなプラットフォームとサーバー インフラストラクチャでホストできます。 たとえば、Blazor または Apache on Linux を使用して アプリをホストできます。 Blazor アプリを発行して展開する方法の詳細については、BlazorHosting と deployment のドキュメントを参照してください。

次のセクションでは、 BlazorWebAssembly および Blazor Server アプリのプロジェクトがどのように設定されているかを見ていきます。