補足：Webアプリのレンダリングモード
最後に、本連載を通して活用してきたBlazor Webアプリの「レンダリングモード」について、本番運用を見据えた選択基準を整理しておきます。基本的な考え方と4つのモードの概要については、連載第1回を参照してください。
4つのレンダリングモードの選び方
.NET 8以降のBlazor Web Appでは、次の4つのレンダリングモードから選択できます。本連載では「対話型サーバー」を使ってきましたが、用途に応じて使い分けるのが基本です。
| モード | 初回表示 | 主な実行場所 | サーバー接続 | 適用場面 |
|---|---|---|---|---|
| 静的サーバー（Static SSR） | 高速 | サーバーでHTML生成 | ページ取得時に必要 | 情報表示サイトなど対話処理が不要な画面 |
| 対話型サーバー（Interactive Server） | 高速 | サーバー（SignalR経由） | 常時必要 | リアルタイム処理（本連載で使用） |
| 対話型WebAssembly（Interactive WebAssembly） | 初回は重め | ブラウザ | API通信時に必要 | クライアント中心の画面 |
| 自動（Interactive Auto） | 高速 | 初回はサーバー、以後はWebAssemblyも利用 | 初回とAPI通信時に必要 | 一般的なWebアプリ |
設定の有効化と指定方法
WebAssemblyや自動モードを利用するには、ImageGenerator.WebプロジェクトのProgram.csでのサービス登録・レンダリングモード登録と、さらに、Blazor WebAssembly側のクライアントプロジェクトも必要です。
本連載のように、テンプレート作成時に「対話型レンダリング モード」を「サーバー」で作った構成では、このクライアントプロジェクトが含まれないため、別の構成に変更したい場合は、目的のレンダリングモードを選んでテンプレートから作り直し、作成済みのコンポーネントやサービスのロジックを移植するほうが確実です。
WebAssemblyや自動モードに対応した構成では、各Razorコンポーネントの@rendermodeディレクティブで使用するモードを指定できます。
@page "/generate" @rendermode InteractiveAuto
InteractiveAutoの部分を、InteractiveServerやInteractiveWebAssemblyに書き換えれば、コンポーネント単位でモードを切り替えられます。
ただし、指定したレンダリングモードが、Program.cs側とプロジェクト構成の両方で有効になっている必要があります。本連載のサーバー構成のままでは、この切り替えはできません。その場合は、前述のとおりテンプレートから作り直してください。
画像生成アプリでの構成選択
今回の画像生成アプリでは、次のように考えればよいでしょう。
| 場面 | 推奨する構成 | 理由 |
|---|---|---|
| 開発中 | Interactive Server | 処理がサーバー側にまとまるため、デバッグやログ確認がしやすい |
| 一般的な対話型画面 | Interactive Auto | 初回表示を速くしつつ、以後のアクセスではWebAssemblyによるクライアント側実行を利用できる |
| APIキーを使う処理 | サーバー側で実行 | Interactive Server、またはサーバーAPI経由にして、APIキーをクライアントへ配信しない |
なお、.NET MAUI Blazor Hybridアプリでは、RazorコンポーネントはBlazorWebView内でローカルのネイティブアプリの一部として実行されます。そのため、Webアプリ向けのレンダリングモードは、MAUI側では適用されません。共有コンポーネントに@rendermodeを付けても、MAUI側のBlazorWebViewではその指定は反映されず、動作に影響はありません。
最後に
全7回にわたって、.NET 9で登場した新しいソリューションテンプレート「.NET MAUI Blazor HybridアプリとWebアプリ」を題材に、マルチターゲットアプリ開発の実践的な手法を解説してきました。連載最後の今回は、APIキーをサーバー内にとどめたままOpenAI APIを呼び出すプロキシ方式を解説しました。
本連載では、インターフェイスとDIを基本にした設計により、UIに手を加えることなくバックエンド側の実装を差し替えることができました。要件の変化に強く、保守性の高いマルチターゲットアプリ開発のヒントになれば幸いです。
より深く学びたい方は、Microsoftの公式ドキュメントも参考にしてください。.NET MAUI Blazorによるマルチターゲット開発の新しい可能性を、ぜひ皆さんの実プロジェクトで活かしてみてください。
