🙄

.NET 8 Preview 6の新しいBlazorWebAppテンプレート

2023/07/18に公開

.NET

Blazor

aspdotnet

tech

前書き

BlazorのSSR(Server Side Rendering)の実装が進んできました。.NET 8 Preview 5から実際にテンプレートとしてBlazorWebAppのテンプレートが実装されてPreview 6で今まであった一通りのページを見ることができました。
ここで、一通りの動作を眺めてみたいと思います。

まずは、これまでのBlazorの動作をホスティングモデルの面から振り返ってみようと思います。

Blazor Server

Blazor Serverではアプリはサーバ上で実行されます。UIの更新や、イベントの処理（ユーザの操作など）JavaScriptの呼び出しなどはすべてSignalR接続経由で処理されます。
つまり、サーバ側でレンダリングされた結果はSignalRの回線経由でDOM操作され描写されることになります。
特徴としては常にSignalR接続を必要としており、接続が切れるとアプリの動作が停止していうという点にあります。
また、サーバ側は常にクライアントとつながっている必要があるので高負荷になりやすいというところに注意が必要です。
これを、緩和するためにAzure SignalR Serviceを使用することもできます。

Blazor WebAssembly

Blazor WebAssemblyはWebAssemblyベースの.NETランタイム上のブラウザで実行されます。
ブラウザ内で実行されるという制約上.NETのフル機能を使えるわけではないというところに注意が必要です。

新しいBlazor WebAppテンプレート

Blazor WebAppテンプレートでは特徴としてサーバー側でレンダリングされるもの、クライアント側でレンダリングされるものこの両方があります。

Counter.razor

Program.csにBlazor Serverのサーバ回線のためのサービスを追加されています。

builder.Services.AddRazorComponents()
    .AddServerComponents();

counter.razorでは属性として[RenderModeServer]が追加されています。

これにより、ページを参照するとBlazorサーバー回線が確立されます。

実際に、開発者ツールで見てみると以下のような動きをしている。

いくつかの接続が張られてなにかのやりとりがされている。
これで、BlazorServerとのやりとりがされCounterボタンを押してonClickイベントを発生させカウントが増加という動作をさせているようである。

ShowData.razor

たとえば、データベースアクセスをしてコンテンツの表示に時間がかかる場合ストリーミングレンダリングによってサーバー側でレンダリングされたユーザーのエクスペリエンスが向上します。
ページのレンダリングの一部として実行されるすべての非同期タスクはレンダリングされた応答の前にすべてが完了される必要があるため通常はページ全体の読み込みに非常に時間がかかる場合があります。
ストリーミングレンダリングでは非同期操作の実行中にページ全体がまずレンダリングされ、非同期操作が完了すると更新されたコンテンツが同じ応答接続でクライアントに送信されてきます。

実際の、テンプレートを見てみるとまず、App.razorに以下のような記述があります。

<script src="_framework/blazor.web.js" suppress-error="BL9992"></script>

そして、ShowData.Razorには[StreamRendering(true)]属性が追加されています。

始め、画面全体が描写されまだデータは来てないのでLoadingが表示されています。

@if (forecasts is null)
{
    <p><em>Loading...</em></p>
}

部分の動作です。

やがて、非同期タスクが完了しデータが到着しコンテンツが応答にストリーミングされてBlazorによってDOMにパッチが適用されます。