BlazorでのWebアプリケーション開発手法１【C#】B21_OnInitializedが2回通る問題の対応

本レクチャーでは、計測画面（MeasurePage.razor）を題材に、OnInitializedが2回実行されてしまう問題と、その対応方法を解説します。

まず、OnInitializedメソッドにブレークポイントを設置した状態でアプリを実行し、サイドメニューの「計測」から計測画面を表示します。

図1　OnInitializedにブレークポイントを設置

ブレークポイントで処理が止まったところで「続行」を押すと、もう1回同じブレークポイントで止まります。1回の画面表示で2回ブレークポイントにヒットしていることになります。

図2　「続行」を押すと再びOnInitializedで停止する

念のためHomeを押してから改めて計測画面を開き、F10でステップ実行しながら続行しても、同様にもう1回OnInitializedを通ることが確認できます。

図3　F10でのステップ実行時も同様に2回目のヒットが発生

なぜ2回通ってしまうのかというと、以前のレクチャーでユーザー操作を行う画面には記述しておくよう案内した @rendermode InteractiveServer が原因です。この記述があると、Blazorの「プリレンダリング」という仕組みが働きます。

プリレンダリングとは、ユーザーに画面をすばやく表示するため、サーバー側であらかじめHTMLを生成しておく仕組みです。このプリレンダリングの際に1回OnInitializedが実行され、さらにクライアント側がサーバーと通信して実際にブラウザへ画面を表示する際にもう1回OnInitializedが実行されるため、結果として2回実行されることになります。

この現象については、Stack Overflowでも同様の質問と回答がされています。

図4　Stack Overflowに投稿されている同様の質問（URLはボーナスレクチャーを参照）

回答では、@rendermode InteractiveServer を、プリレンダリングを無効にした @rendermode @(new InteractiveServerRenderMode(prerender: false)) という記述に置き換えることが対応方法として示されています。

図5　Stack Overflowの回答に示されている置き換え後の記述

この対応をMeasurePage.razorに反映します。まず、既存の @rendermode InteractiveServer の行をコメントアウトします。

@* @rendermode InteractiveServer *@

続けてその下に、prerenderをfalseに指定した新しい @rendermode の記述を追加します。デフォルトではprerenderはtrueになっており、これがプリレンダリングが有効になっている原因です。それをfalseにすることでプリレンダリングをオフにします。

図6　新しい@rendermodeの記述を入力しているところ

@rendermode @(new InteractiveServerRenderMode(prerender: false))

図7　入力し終えた@rendermodeの記述（prerender: falseを指定）

図8　MeasurePage.razor冒頭の最終的な記述内容

この状態で実行し、計測画面を開いてボタンを押すと、OnInitializedは1回しか通らなくなります。

図9　修正後、計測画面が正しく表示される

なお、OnInitializedが2回通ってしまうこと自体は、今回のようにメモリ上の値をセットしているだけの処理であれば、特に問題にならないことも多いです。しかし、ここでデータベースの検索など負荷の高い処理を行っている場合は、無駄に2回実行されてしまい、パフォーマンス上好ましくありません。そのため、そうした処理を行う画面では、プリレンダリングをオフにする対応をしておいた方がよいでしょう。

プリレンダリングをオフにしても大丈夫かという点については、プリレンダリングはあくまで「サーバー側であらかじめHTMLを作っておくことで、ほんの少し表示を早くする」ためのものであり、オフにしたからといって画面表示が体感できるほど遅くなることはほとんどありません。気になる場合は実際に試してみて、パフォーマンスに影響があるようであれば、そのときに改めて調整すればよいでしょう。

基本的には、ユーザー操作を伴う画面ではこの @rendermode @(new InteractiveServerRenderMode(prerender: false)) を記述しておくのがおすすめです。なお、今回解説したOnInitializedだけでなく、パラメータ変化時に呼ばれるOnParametersSetについても同様に2回実行されてしまう現象が起きるため、あわせて1回に抑えるようにしておくとよいでしょう。