BlazorでのWebアプリケーション開発手法１【C#】A09_@rendermode

@rendermode InteractiveServer とは

Counter.razorの2行目に書かれている「@rendermode InteractiveServer」について解説します。これは、ユーザーが画面を操作したときにサーバーと通信するかどうかを指定する記述です。

図1　Counter.razorの2行目に@rendermode InteractiveServerと記述されている

画面が最初に表示されるときは、この記述の有無にかかわらずサーバーと通信して表示されます。問題になるのは、その後ボタンを押すなどのユーザー操作があったときです。ボタンを押して画面を更新するCounter画面のようなページでは、ユーザー操作をサーバーに伝えるために、必ずこの記述が必要になります。

動作確認：ボタンを押してカウントアップ

実際にCounter画面を開き、「Click me」ボタンを押すと、サーバーと通信してCurrent countの値が更新されていくことが確認できます。

図2　Counter画面。ボタンを押す前はCurrent count: 0

図3　ボタンを押すたびにサーバーと通信し、Current countが11に更新される

@rendermode を外すとどうなるか

試しに2行目の「@rendermode InteractiveServer」を削除してビルドし直してみます。

@page "/counter"

<PageTitle>Counter</PageTitle>

図4　2行目の@rendermode InteractiveServerを削除してリビルド

この状態で画面を開くと、初期表示（Current count: 0）はされます。ところが「Click me」ボタンを押しても、サーバーと通信しないためCurrent countの値が更新されません。

図5　@rendermodeを外した状態でボタンを押しても、Current countは0のまま変化しない

つまり@rendermode InteractiveServerという記述がないと、初期表示はできてもユーザー操作をサーバーに伝えることができない、ということです。

記述を元に戻す

削除した行を元に戻してリビルドすると、再びボタン操作でサーバーと通信できるようになります。

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

図6　@rendermode InteractiveServerを元に戻してリビルド

図7　記述を戻すと、ボタン操作でCurrent countが再び更新されるようになる

Interactivity locationとの関係

プロジェクトを新規作成する際に選択した「Interactivity location」の設定によって、この記述の要・不要が変わります。プロジェクト作成画面には、Per page/componentとGlobalの2つの選択肢がありました。

図8　プロジェクト作成時の追加情報画面。Interactivity locationの設定項目

図9　Interactivity locationのドロップダウン。Per page/componentとGlobalの2択

Globalを選んでおけば、各ページに@rendermode InteractiveServerを書く必要はなくなります。その代わり、常にサーバーとつなぎっぱなしの状態になるため、サーバーの負荷は上がります。

一方、Per page/component（本コースで選択している設定）を選んでおくと、ユーザー操作があるページだけに@rendermode InteractiveServerを書けばよく、通信が不要なページには書かない、という判断ができます。その分サーバーへの負荷を抑えられるため、基本的にはPer page/componentを選んでおく方がよいということになります。

記述が不要なページの例：Weather画面

Weather画面はデータの一覧をポンと表示するだけで、ユーザー操作を受け取る必要がないページです。そのため、Weather.razorには@rendermode InteractiveServerの記述がありません。

図10　Weather.razor。@attribute [StreamRendering]はあるが、@rendermodeの記述はない

このように、ユーザー操作を受け取って画面を更新する必要があるページにだけ@rendermode InteractiveServerを書く、というのがPer page/component設定における基本的な考え方です。