ASP.NET Core Blazor のホスティング モデル

この記事では、.NET 8 より前の .NET バージョンでの Blazor Server および Blazor WebAssembly アプリを重点的に、Blazor ホスティング モデルについて説明します。 この記事のガイダンスは、すべての .NET リリースに適用され、モバイルおよびデスクトップのネイティブ プラットフォームで動作する Blazor Hybrid アプリが対象です。 .NET 8 以降の Blazor Web App は、Razor コンポーネントがどのようにしてレンダリングされるか (これはレンダー モードとして説明されます) によってより良く概念化されます。 レンダリング モードについては、「基礎」の概要記事で簡単に説明し、「コンポーネント」ノードの「ASP.NET Core Blazor のレンダリング モード」で詳しく説明しています。

Blazor は、さまざまな方法でホストできる Web UI コンポーネント (Razor コンポーネント) を構築するための Web フレームワークです。 Razorコンポーネントは、Blazor Server ベースの .NET ランタイム (、Blazor WebAssemblyBlazor) 上のブラウザーで、ASP.NET Core () とクライアント側でサーバー側を実行できます。 また、埋め込まれた Web View コントロール (Blazor Hybrid) にレンダリングするネイティブ モバイル アプリやデスクトップ アプリで Razor コンポーネントをホストすることもできます。 ホスティング モデルが何であっても、Razor コンポーネントを構築する方法は 同じです。 同じ Razor コンポーネントを、変更することなく任意のホスティング モデルで使用できます。

Blazor Server

Blazor Server ホスティング モデルを使用すると、コンポーネントは ASP.NET Core アプリ内からサーバー上で実行されます。 UI の更新、イベント処理、JavaScript の呼び出しは、WebSocket プロトコルを使用して SignalR 接続経由で処理されます。 接続されている各クライアントに関連付けられているサーバー上の状態は、"回線" と呼ばれます。 回線は特定のネットワーク接続に関連付けられず、一時的なネットワークの中断や、接続が切断されたときにクライアントがサーバーに再接続しようとすることを許容します。

従来のサーバーでレンダリングされるアプリでは、複数のブラウザー画面 (タブまたは iframes) で同じアプリを開いても、通常、サーバー上で追加のリソースは要求されません。 Blazor Server ホスティング モデルでは、ブラウザーの画面ごとに個別のサーキットと、サーバーが管理するコンポーネントの状態の個別のインスタンスが必要です。 Blazor では、ブラウザーのタブを閉じる操作や外部 URL への移動を正常な終了と見なします。 正常な終了が行われた場合は、回線と関連リソースが直ちに解放されます。 ネットワークの中断などにより、クライアントが正常に切断されないこともあります。 Blazor Server では、クライアントが再接続できるように、切断された接続が格納されます (その間隔は設定できます)。

クライアントでは、Blazor スクリプトによって、サーバーとの SignalR 接続が確立されます。 スクリプトは、自動圧縮と フィンガープリントを備えた静的な Web 資産として機能します。

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

• ダウンロード サイズは Blazor WebAssembly ホスティング モデルの使用時よりも大幅に小さく、アプリの読み込み時間が大幅に短縮されます。
• このアプリでは、.NET API の使用を含め、サーバー機能を最大限に活用します。
• サーバー上の .NET はアプリの実行に使用されるため、デバッグなどの既存の .NET ツールは想定どおりに動作します。
• シン クライアントがサポートされています。 たとえば、Blazor Server は、WebAssembly がサポートされていないブラウザーや、リソースが制限されたデバイスで動作します。
• アプリのコンポーネント コードを含め、アプリの .NET/C# コード ベースはクライアント側には配信されません。

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

• 通常、レイテンシーは高いです。 すべてのユーザー操作でネットワーク ホップが発生します。
• オフライン サポートがありません。 クライアントの接続が切れると、対話機能も動作しなくなります。
• 多くのユーザーを抱えるアプリをスケーリングするには、複数のクライアント接続とクライアントの状態を処理するためのサーバー リソースが必要です。
• アプリを提供するのに ASP.NET Core サーバーが必要です。 Content Delivery Network (CDN) からアプリを提供するようなサーバーレス展開シナリオは不可能です。

Blazor Server ホスティング モデルを採用するアプリでは、Azure SignalR Service の使用をお勧めします。 このサービスでは、Blazor Server アプリを多数の同時 SignalR 接続に対応できるようにスケールアップできます。

Blazor WebAssembly

Blazor WebAssembly ホスティング モデルは、クライアント側の WebAssembly ベースの .NET ランタイム上のブラウザーでコンポーネントを実行します。 Razor コンポーネント、その依存関係、および .NET ランタイムがブラウザーにダウンロードされます。 コンポーネントはブラウザー UI スレッド上で直接実行されます。 UI の更新とイベントの処理は、同じプロセス内で行われます。 資産は、静的コンテンツをクライアントに提供できる Web サーバーまたはサービスに静的ファイルとしてデプロイされます。

Blazor Web Apps では、Blazor WebAssembly ホスティング モデルを使用してクライアント側の対話機能を有効にできます。 サーバー側のレンダリングや対話機能を使用せず、Blazor WebAssembly ホスティング モデルのみで動作するアプリは、スタンドアロン Blazor WebAssembly アプリと呼ばれます。

Blazor WebAssembly Progressive Web App (PWA) として構築されたアプリでは、最新のブラウザー API を使用して、ネイティブ クライアント アプリの多くの機能が実現されます。たとえば、オフラインでの作業、独自のアプリ ウィンドウでの実行、ホストのオペレーティング システムからの起動、プッシュ通知の受信、バックグラウンドでの自動更新などです。

Blazor スクリプトは次の処理を行います。

• .NET ランタイム、Razor コンポーネント、依存関係のダウンロード。
• ランタイムの初期化。

公開されているアプリのサイズである "ペイロードのサイズ" は、アプリのユーザビリティに関する重要なパフォーマンス要因になります。 大規模なアプリは、ブラウザーへのダウンロードに比較的長い時間がかかり、ユーザー エクスペリエンスが損なわれます。 Blazor WebAssembly は、ダウンロード時間を短縮するためにペイロード サイズを最適化します:

• アプリの公開時に中間言語 (IL) トリマーによって、アプリから未使用コードが除去されます。
• HTTP 応答が圧縮されます。
• .NET ランタイムとアセンブリがブラウザーにキャッシュされます。

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

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

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

• Razor コンポーネントで使用できる機能は、ブラウザーがサポートする機能に限られます。
• 対応したクライアント ハードウェアおよびソフトウェア (たとえば、WebAssembly サポート) が必要です。
• ダウンロード サイズが大きくなり、コンポーネントの読み込みにかかる時間が長くなります。
• クライアントに送信されるコードを、ユーザーによる検査や改ざんから保護することはできません。

.NET 中間言語 (IL) インタープリターには、部分的なジャスト イン タイム (JIT) ランタイム サポートが含まれていて、ランタイムのパフォーマンス向上を実現します。 JIT インタープリターでは、インタープリターのバイトコードの実行を最適化するために、それらを WebAssembly コードの小さな BLOB に置き換えます。 JIT インタープリターは、デバッグ時を除き、Blazor WebAssembly アプリに対して自動的に有効になります。

Blazor では、Ahead-Of-Time (AOT) コンパイルがサポートされており、.NET のコードを WebAssembly に直接コンパイルできます。 AOT コンパイルを使用すると、アプリのサイズが大きくなりますが、実行時のパフォーマンスが向上します。 詳細については、「ASP.NET Core Blazor WebAssembly ビルド ツールと Ahead-Of-Time (AOT) コンパイル」を参照してください。

AOT コンパイルに使用されるものと同じ .NET WebAssembly ビルド ツールでも、.Net WebAssembly ランタイムを再リンクして、使用されていないランタイム コードをトリミングします。 Blazor は、.NET Framework ライブラリの未使用のコードのトリミングも行います。 .NET コンパイラは、アプリのペイロードを小さくするために、スタンドアロンの Blazor WebAssembly アプリをさらに事前圧縮します。

WebAssembly でレンダリングされた Razor コンポーネントは、WebAssembly での実行用にビルドされたネイティブの依存関係を使用できます。

Blazor Hybrid

Blazor は、ハイブリッド アプローチを使ってネイティブ クライアント アプリを構築するために使うこともできます。 ハイブリッド アプリは、その機能に Web テクノロジを利用するネイティブ アプリです。 Blazor Hybrid アプリの Razor コンポーネントは、(WebAssembly 上ではなく) ネイティブ アプリ内で他の .NET コードと共に直接実行され、HTML と CSS に基づく Web UI を、ローカル相互運用チャネルを介して埋め込み Web View コントロールにレンダリングします。

Blazor Hybrid アプリは、.NET MAUI、WPF、Windows フォームなど、さまざまな .NET ネイティブ アプリ フレームワークを使って構築できます。 Blazor には、これらのフレームワークで構築されたアプリに BlazorWebView コンポーネントを追加するための Razor コントロールが用意されています。 Blazor を .NET MAUI で使うと、モバイルおよびデスクトップ用のクロスプラットフォーム Blazor Hybrid アプリを構築する便利な方法が提供されます。一方、WPF や Windows フォームとの Blazor の統合は、既存のアプリを最新化するための優れた方法です。

Blazor Hybrid アプリはネイティブ アプリなので、Web プラットフォームだけでは使用できない機能をサポートできます。 Blazor Hybrid アプリは、通常の .NET API を介してネイティブ プラットフォームの機能に完全にアクセスできます。 また、Blazor Hybrid アプリは、コンポーネントを既存の Blazor Server または Blazor WebAssembly アプリと共有して再利用することもできます。 Blazor Hybrid アプリは、Web、ネイティブ アプリ、.NET プラットフォームの利点を兼ね備えています。

Blazor Hybrid ホスティング モデルには、次のいくつかの利点があります。

• モバイル、デスクトップ、Web 間で共有できる既存のコンポーネントを再利用します。
• Web 開発のスキル、経験、リソースを活用する。
• アプリは、デバイスのネイティブ機能に完全にアクセスできます。

Blazor Hybrid ホスティング モデルには、次の制限があります。

• ターゲット プラットフォームごとに個別のネイティブ クライアント アプリを構築、展開、保守する必要があります。
• ネイティブ クライアント アプリは、通常、ブラウザーで Web アプリにアクセスするよりも、検索、ダウンロード、インストールに時間がかかります。

詳細については、ASP.NET Core Blazor Hybrid に関する記事を参照してください。

Microsoft ネイティブ クライアント フレームワークについて詳しくは、次のリソースをご覧ください。

• .NET Multi-platform App UI (.NET MAUI)
• Windows Presentation Foundation (WPF)
• Windows フォーム

どの Blazor ホスティング モデルを選択すべきですか?

コンポーネントのホスティング モデルは、コンパイル時または実行時にそのレンダー モードによって設定されます。これについては、ASP.NET Core Blazor のレンダー モードで例を交えて説明されています。 コンポーネントのホスティング モデルを決定するためにレンダリング モードを設定するときの主な考慮事項を次の表に示します。 スタンドアロン Blazor WebAssembly アプリの場合、アプリのすべてのコンポーネントは、Blazor WebAssembly ホスティング モデルを使用してクライアントにレンダリングされます。

Blazor Hybrid アプリには、.NET MAUI、WPF、Windows フォーム フレームワーク アプリが含まれます。

Feature	Blazor Server	Blazor WebAssembly (Wasm)	Blazor Hybrid
.NET API との完全な互換性	✔️Supported	❌ サポートされていません	✔️Supported
サーバーおよびネットワーク リソースへの直接アクセス	✔️Supported	❌ サポートされていません†	❌ サポートされていません†
小さいペイロード サイズと高速な初期読み込み時間	✔️Supported	❌ サポートされていません	❌ サポートされていません
ほぼネイティブの実行速度	✔️Supported	✔️Supported‡	✔️Supported
サーバー上でもアプリ コードは安全に保護され、非公開です	✔️Supported	❌ サポートされていません†	❌ サポートされていません†
ダウンロード後はアプリをオフラインで実行できます	❌ サポートされていません	✔️Supported	✔️Supported
静的サイトのホスティング	❌ サポートされていません	✔️Supported	❌ サポートされていません
処理をクライアントにオフロードする	❌ サポートされていません	✔️Supported	✔️Supported
クライアントのネイティブ機能への完全なアクセス	❌ サポートされていません	❌ サポートされていません	✔️Supported
Web ベースのデプロイ	✔️Supported	✔️Supported	❌ サポートされていません

†Blazor WebAssembly および Blazor Hybrid アプリは、サーバーベースの API を使用してサーバーおよびネットワーク リソースにアクセスし、非公開でセキュリティ保護されたアプリ コードにアクセスできます。
‡Blazor WebAssembly がほぼネイティブのパフォーマンスに到達するのは、Ahead-Of-Time (AOT) コンパイルを使用する場合のみです。

アプリのホスティング モデルを選択した後、Blazor プロジェクト テンプレートから Blazor Server または Blazor WebAssembly アプリを生成できます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

Blazor Hybrid アプリを作成するには、「ASP.NET Core Blazor Hybrid チュートリアル」に記載されている記事をご覧ください。

.NET API との完全な互換性

Blazor Server ホスティング モデルと Blazor Hybrid アプリに対してレンダリングされるコンポーネントは .NET API に完全に対応していますが、Blazor WebAssembly に対してレンダリングされるコンポーネントは .NET API のサブセットに制限されます。 アプリの仕様上、WebAssembly でレンダリングされるコンポーネントでは使用できない .NET API が 1 つ以上必要な場合は、Blazor Server でコンポーネントをレンダリングするか、Blazor Hybrid を使用してください。

サーバーおよびネットワーク リソースへの直接アクセス

Blazor Server ホスティング モデルに対してレンダリングされるコンポーネントは、アプリが実行されているサーバーおよびネットワーク リソースに直接アクセスできます。 Blazor WebAssembly または Blazor Hybrid を使用してホストされるコンポーネントはクライアント上で実行されるため、サーバーおよびネットワーク リソースに直接アクセスすることはできません。 コンポーネントは、保護されたサーバーベースの API 経由で 間接的に サーバーおよびネットワーク リソースにアクセスできます。 サーバーベースの API は、サードパーティのライブラリ、パッケージ、サービスを介して利用できる場合があります。 次の点を考慮してください。

• サードパーティのライブラリ、パッケージ、サービスは、実装と保守にコストがかかるか、サポートが不十分であるか、セキュリティ上のリスクをもたらす可能性があります。
• 1 つまたは複数のサーバーベースの API が組織によって内部的に開発されている場合は、それらの構築と保守のために追加のリソースが必要になります。

サーバー環境から API を公開する必要を回避するには、Blazor Server ホスティング モデルを使用してください。

小さいペイロード サイズと高速な初期読み込み時間

サーバーからコンポーネントをレンダリングすると、アプリのペイロード サイズが減少し、初期読み込み時間が短縮されます。 初期読み込み時間を短縮するときは、Blazor Server ホスティング モデルを使用するか、静的サーバー側レンダリングを検討してください。

ほぼネイティブの実行速度

Blazor Hybrid アプリは、対象プラットフォーム上で .NET ランタイムをネイティブに実行するため、可能な限り高い実行速度が得られます。

Blazor WebAssembly ホスティング モデルに対してレンダリングされるコンポーネント (プログレッシブ Web アプリ (PWA) を含む) およびスタンドアロン Blazor WebAssembly アプリは、WebAssembly 用 .NET ランタイムを使用して実行されます。これは、プラットフォーム上で直接実行するより遅くなります。 Blazor WebAssembly を使用する場合は、実行時のパフォーマンスを向上させるために ahead-of-time（AOT）コンパイル済み を使用することを検討してください。

サーバー上でアプリ コードを安全かつ非公開に保つ

サーバー上でアプリ コードを安全かつ非公開に維持することは、Blazor Server ホスティング モデル向けにレンダリングされるコンポーネントの組み込み機能です。 Blazor WebAssembly または Blazor Hybrid ホスティング モデルでレンダリングされるコンポーネントは、サーバー側の API を使用して、非公開かつ安全に保つ必要がある機能にアクセスできます。 「サーバーおよびネットワーク リソースへの直接アクセス」セクションで説明されているサーバーベースの API の開発と管理に関する考慮事項が適用されます。 アプリ コードを安全かつ非公開に維持するために、サーバーベースの API の開発と管理が望ましくない場合は、Blazor Server ホスティング モデル用にコンポーネントをレンダリングしてください。

ダウンロード後はアプリをオフラインで実行

プログレッシブ Web アプリ (PWA) として構築されたスタンドアロン Blazor WebAssembly アプリと Blazor Hybrid アプリはオフラインで実行できます。これは、クライアントがインターネットに接続できない場合に特に便利です。 Blazor Server ホスティング モデルに対してレンダリングされるコンポーネントは、サーバーへの接続が失われると実行に失敗します。 アプリをオフラインで実行する必要がある場合は、スタンドアロンの Blazor WebAssembly と Blazor Hybrid が最適な選択肢です。

静的サイトのホスティング

スタンドアロンのBlazor WebAssemblyアプリは一連の静的ファイルとしてクライアントにダウンロードされるため、静的サイトホスティングが可能です。 スタンドアロン Blazor WebAssembly アプリは、ダウンロードして実行する際に、サーバー側のコードを実行するサーバーを必要とせず、コンテンツ配信ネットワーク (CDN) (Azure CDN など) を通じて配信できます。

Blazor Hybrid アプリは 1 つまたは複数の自己完結型の展開資産にコンパイルされますが、資産は通常、サードパーティのアプリ ストアを介してクライアントに提供されます。 静的ホスティングがアプリの要件である場合は、スタンドアロン Blazor WebAssembly を選択してください。

処理をクライアントにオフロードする

Blazor WebAssembly および Blazor Hybrid アプリはクライアント上で実行されるため、処理がクライアントにオフロードされます。 Blazor Server アプリはサーバー上で実行されるため、通常は、ユーザー数およびユーザーごとに必要な処理量に応じてサーバー リソースの需要が増加します。 アプリの大部分または全部の処理をクライアントにオフロードすることが可能であり、アプリで大量のデータを処理する場合は、Blazor WebAssembly または Blazor Hybrid が最適な選択肢です。

クライアントのネイティブ機能への完全なアクセス

Blazor Hybrid アプリは、.NET ネイティブ アプリ フレームワークを介してネイティブ クライアント API の機能に完全にアクセスできます。 Blazor Hybrid アプリの Razor コンポーネントは、WebAssembly ではなく、ネイティブ アプリで直接実行されます。 完全なクライアント機能が必要な場合は、Blazor Hybrid が最適な選択肢です。

Web ベースのデプロイ

Blazor Web Apps は、ブラウザーで次にアプリを更新したときに更新されます。

Blazor Hybrid アプリはネイティブ クライアント アプリであり、通常、インストーラーとプラットフォーム固有の展開メカニズムが必要になります。

コンポーネントのホスティング モデルの設定

コンポーネントのホスティング モデルをコンパイル時または実行時に動的に Blazor Server または Blazor WebAssembly に設定するには、その レンダリング モード を設定します。 レンダリング モードについては、「ASP.NET Core Blazor レンダリング モード」記事に詳細な説明と実例があります。 この 2 つの記事の間の記事の内容を読まずに、この記事から直接 レンダリング モード の記事に移動することはお勧めしません。 たとえば、レンダリング モードは Razor コンポーネントの例を見ると理解しやすくなりますが、基本的な Razor コンポーネントの構造と機能は、「ASP.NET Core Blazor の基礎」記事に到達するまで扱われません。 レンダリング モードに関する記事のコンポーネント例に取り組む前に、Blazor のプロジェクト テンプレートとツールについて理解しておくことも役立ちます。