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

Daniel RothBy Daniel Roth

重要

プレビュー段階の Blazor WebAssemblyBlazor WebAssembly in preview

Blazor サーバーは ASP.NET Core 3.0 でサポートされています。Blazor Server is supported in ASP.NET Core 3.0. Blazor WebAssembly は、ASP.NET Core 3.1 のプレビュー段階です。Blazor WebAssembly is in preview for ASP.NET Core 3.1.

Blazor は、ブラウザーでブラウザーでクライアント側を実行するように設計された web フレームワークで、 WEBAS.NETランタイム (Blazor Webassembly) またはサーバー ASP.NET Core 側 (Blazor サーバー) で実行します。Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). ホスティングモデルに関係なく、アプリモデルとコンポーネントモデルは同じです。Regardless of the hosting model, the app and component models are the same.

この記事で説明されているホスティングモデルのプロジェクトを作成するには、「ASP.NET Core Blazor を使ってみる」を参照してください。To create a project for the hosting models described in this article, see ASP.NET Core Blazor を使ってみる.

Blazor WebAssemblyBlazor WebAssembly

Blazor のプリンシパルホスティングモデルは、ブラウザーでクライアント側で実行されます。The principal hosting model for Blazor is running client-side in the browser on WebAssembly. Blazor アプリ、その依存関係、.NET ランタイムがブラウザーにダウンロードされます。The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. アプリがブラウザー UI スレッド上で直接実行されます。The app is executed directly on the browser UI thread. UI の更新とイベントの処理は、同じプロセス内で行われます。UI updates and event handling occur within the same process. アプリの資産は静的ファイルとして、静的コンテンツをクライアントに提供できる web サーバーまたはサービスに展開されます。The app's assets are deployed as static files to a web server or service capable of serving static content to clients.

Blazor WebAssembly Blazor アプリは、ブラウザー内の UI スレッドで実行されます。

クライアント側のホスティングモデルを使用して Blazor アプリを作成するには、 Blazor WebAssembly アプリテンプレート (dotnet new blazorwasm) を使用します。To create a Blazor app using the client-side hosting model, use the Blazor WebAssembly App template (dotnet new blazorwasm).

Blazor WebAssembly アプリテンプレートを選択した後、[ホストされているASP.NET Core ] チェックボックス (new blazorwasm--hosted) を選択して、ASP.NET Core バックエンドを使用するようにアプリを構成することができます。After selecting the Blazor WebAssembly App template, you have the option of configuring the app to use an ASP.NET Core backend by selecting the ASP.NET Core hosted check box (dotnet new blazorwasm --hosted). ASP.NET Core アプリは、Blazor アプリをクライアントに提供します。The ASP.NET Core app serves the Blazor app to clients. Blazor WebAssembly は、web API 呼び出しまたはSignalRを使用して、ネットワーク経由でサーバーと通信できます。The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR.

テンプレートには、を処理するblazorスクリプトが含まれています。The templates include the blazor.webassembly.js script that handles:

  • .NET ランタイム、アプリ、およびアプリの依存関係をダウンロードしています。Downloading the .NET runtime, the app, and the app's dependencies.
  • アプリを実行するランタイムの初期化。Initialization of the runtime to run the app.

Blazor WebAssembly ホスティングモデルには、いくつかの利点があります。The Blazor WebAssembly hosting model offers several benefits:

  • .NET サーバー側の依存関係はありません。There's no .NET server-side dependency. クライアントにダウンロードされた後、アプリは完全に機能しています。The app is fully functioning after downloaded to the client.
  • クライアントのリソースと機能は完全に活用されています。Client resources and capabilities are fully leveraged.
  • 作業はサーバーからクライアントにオフロードされます。Work is offloaded from the server to the client.
  • アプリケーションをホストするために ASP.NET Core web サーバーは必要ありません。An ASP.NET Core web server isn't required to host the app. サーバーレスの展開シナリオが可能です (たとえば、CDN からアプリを提供するなど)。Serverless deployment scenarios are possible (for example, serving the app from a CDN).

Blazor WebAssembly には欠点があります。There are downsides to Blazor WebAssembly hosting:

  • アプリは、ブラウザーの機能に制限されています。The app is restricted to the capabilities of the browser.
  • サポートされているクライアントハードウェアとソフトウェア (たとえば、WebAssembly サポート) が必要です。Capable client hardware and software (for example, WebAssembly support) is required.
  • ダウンロードサイズが大きくなり、アプリの読み込みに時間がかかります。Download size is larger, and apps take longer to load.
  • .NET ランタイムとツールのサポートの成熟度は低くなります。.NET runtime and tooling support is less mature. たとえば、 .NET Standardのサポートとデバッグには制限があります。For example, limitations exist in .NET Standard support and debugging.

Blazor サーバーBlazor Server

Blazor Server ホスティングモデルでは、アプリは ASP.NET Core アプリ内からサーバー上で実行されます。With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI の更新、イベント処理、JavaScript の呼び出しは、SignalR 接続経由で処理されます。UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

ブラウザーは、SignalR 接続を介して、サーバー上の (ASP.NET Core アプリ内でホストされている) アプリと対話します。

Blazor サーバーホスティングモデルを使用して Blazor アプリを作成するには、ASP.NET Core Blazor Server アプリケーションテンプレート (dotnet new blazorserver) を使用します。To create a Blazor app using the Blazor Server hosting model, use the ASP.NET Core Blazor Server App template (dotnet new blazorserver). ASP.NET Core アプリは Blazor Server アプリをホストし、クライアントが接続する SignalR エンドポイントを作成します。The ASP.NET Core app hosts the Blazor Server app and creates the SignalR endpoint where clients connect.

ASP.NET Core アプリはアプリの @no__t 0 クラスを参照して、次を追加します。The ASP.NET Core app references the app's Startup class to add:

  • サーバー側サービス。Server-side services.
  • 要求処理パイプラインに対するアプリ。The app to the request handling pipeline.

Blazorスクリプト @ no__t-1 は、クライアント接続を確立します。The blazor.server.js script† establishes the client connection. アプリケーションの状態は、必要に応じて永続化および復元する必要があります (ネットワーク接続が切断された場合など)。It's the app's responsibility to persist and restore app state as required (for example, in the event of a lost network connection).

Blazor サーバーホスティングモデルには、いくつかの利点があります。The Blazor Server hosting model offers several benefits:

  • ダウンロードサイズは、Blazor Webasアプリよりも大幅に小さく、アプリの読み込みにかかる時間が大幅に短縮されます。Download size is significantly smaller than a Blazor WebAssembly app, and the app loads much faster.
  • このアプリでは、.NET Core と互換性のある Api の使用を含め、サーバーの機能を最大限に活用できます。The app takes full advantage of server capabilities, including use of any .NET Core compatible APIs.
  • サーバー上の .NET Core はアプリを実行するために使用されるため、デバッグなどの既存の .NET ツールは想定どおりに動作します。.NET Core on the server is used to run the app, so existing .NET tooling, such as debugging, works as expected.
  • シンクライアントがサポートされています。Thin clients are supported. たとえば、Blazor Server apps は、WebAssembly サポートされていないブラウザーや、リソースに制約のあるデバイスで動作します。For example, Blazor Server apps work with browsers that don't support WebAssembly and on resource-constrained devices.
  • アプリのコンポーネントコードをC#含む、アプリの .net/コードベースはクライアントに提供されません。The app's .NET/C# code base, including the app's component code, isn't served to clients.

Blazor サーバーホストには、次のような欠点があります。There are downsides to Blazor Server hosting:

  • 通常、待機時間が長くなります。Higher latency usually exists. すべてのユーザーの操作には、ネットワークホップが関係します。Every user interaction involves a network hop.
  • オフラインサポートはありません。There's no offline support. クライアント接続が失敗した場合、アプリは動作を停止します。If the client connection fails, the app stops working.
  • 多くのユーザーがいるアプリでは、スケーラビリティが困難です。Scalability is challenging for apps with many users. サーバーは、複数のクライアント接続を管理し、クライアントの状態を処理する必要があります。The server must manage multiple client connections and handle client state.
  • アプリを提供するには、ASP.NET Core サーバーが必要です。An ASP.NET Core server is required to serve the app. サーバーレス展開シナリオは使用できません (たとえば、CDN からアプリを提供するなど)。Serverless deployment scenarios aren't possible (for example, serving the app from a CDN).

@no__t- 0theスクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから提供されます。†The blazor.server.js script is served from an embedded resource in the ASP.NET Core shared framework.

サーバーレンダリングの UI との比較Comparison to server-rendered UI

Blazor Server アプリを理解する方法の1つは、Razor ビューまたは Razor Pages を使用して ASP.NET Core アプリで UI をレンダリングするための従来のモデルとの違いを理解することです。One way to understand Blazor Server apps is to understand how it differs from traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages. どちらのモデルでも、Razor 言語を使用して HTML コンテンツを記述しますが、マークアップのレンダリング方法が大きく異なります。Both models use the Razor language to describe HTML content, but they significantly differ in how markup is rendered.

Razor ページまたはビューがレンダリングされると、Razor コードのすべての行で HTML がテキスト形式で出力されます。When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. レンダリング後、サーバーは、生成されたすべての状態を含むページまたはビューインスタンスを破棄します。After rendering, the server disposes of the page or view instance, including any state that was produced. サーバーの検証に失敗し、検証の概要が表示される場合など、ページに対する別の要求が発生したとき。When another request for the page occurs, for instance when server validation fails and the validation summary is displayed:

  • ページ全体が HTML テキストに再び表示されます。The entire page is rerendered to HTML text again.
  • ページがクライアントに送信されます。The page is sent to the client.

Blazor アプリは、コンポーネントと呼ばれる UI の再利用可能な要素で構成されています。A Blazor app is composed of reusable elements of UI called components. コンポーネントにはC# 、コード、マークアップ、およびその他のコンポーネントが含まれています。A component contains C# code, markup, and other components. コンポーネントがレンダリングされると、Blazor は HTML または XML ドキュメントオブジェクトモデル (DOM) のような、含まれているコンポーネントのグラフを生成します。When a component is rendered, Blazor produces a graph of the included components similar to an HTML or XML Document Object Model (DOM). このグラフには、プロパティとフィールドに保持されているコンポーネントの状態が含まれます。This graph includes component state held in properties and fields. Blazor は、コンポーネントグラフを評価して、マークアップのバイナリ表現を生成します。Blazor evaluates the component graph to produce a binary representation of the markup. バイナリ形式は次のようになります。The binary format can be:

  • (プリレンダリング中に) HTML テキストに変換されます。Turned into HTML text (during prerendering).
  • 通常のレンダリング中にマークアップを効率的に更新するために使用されます。Used to efficiently update the markup during regular rendering.

Blazor の UI 更新は、次の方法でトリガーされます。A UI update in Blazor is triggered by:

  • ユーザー操作 (ボタンの選択など)。User interaction, such as selecting a button.
  • タイマーなどのアプリトリガー。App triggers, such as a timer.

グラフが再ピアリングされ、UI diff (差分) が計算されます。The graph is rerendered, and a UI diff (difference) is calculated. この diff は、クライアントで UI を更新するために必要な DOM 編集の最小セットです。This diff is the smallest set of DOM edits required to update the UI on the client. Diff はバイナリ形式でクライアントに送信され、ブラウザーによって適用されます。The diff is sent to the client in a binary format and applied by the browser.

コンポーネントは、ユーザーがクライアント上で移動した後に破棄されます。A component is disposed after the user navigates away from it on the client. ユーザーがコンポーネントを操作している間、コンポーネントの状態 (サービス、リソース) は、サーバーのメモリに保持されている必要があります。While a user is interacting with a component, the component's state (services, resources) must be held in the server's memory. 多くのコンポーネントの状態は同時にサーバーによって維持される可能性があるため、メモリ不足に対処する必要があります。Because the state of many components might be maintained by the server concurrently, memory exhaustion is a concern that must be addressed. Blazor Server アプリを作成してサーバーのメモリを最大限に活用する方法については、「Blazor サーバーアプリをセキュリティで保護する ASP.NET Core」を参照してください。For guidance on how to author a Blazor Server app to ensure the best use of server memory, see Blazor サーバーアプリをセキュリティで保護する ASP.NET Core.

接続Circuits

Blazor Server アプリは、 ASP.NET Core SignalRの上に構築されています。A Blazor Server app is built on top of ASP.NET Core SignalR. 各クライアントは、回線と呼ばれる1つ以上の SignalR 接続を介してサーバーと通信します。Each client communicates to the server over one or more SignalR connections called a circuit. 回線は、一時的なネットワーク中断を許容できる SignalR 接続に対する Blazor の抽象化です。A circuit is Blazor's abstraction over SignalR connections that can tolerate temporary network interruptions. Blazor クライアントは、SignalR 接続が切断されていることを確認すると、新しい SignalR 接続を使用してサーバーへの再接続を試みます。When a Blazor client sees that the SignalR connection is disconnected, it attempts to reconnect to the server using a new SignalR connection.

Blazor Server アプリに接続されている各ブラウザー画面 (ブラウザータブまたは iframe) は、SignalR 接続を使用します。Each browser screen (browser tab or iframe) that is connected to a Blazor Server app uses a SignalR connection. これは、サーバーでレンダリングされる一般的なアプリと比較して、もう1つ重要な違いです。This is yet another important distinction compared to typical server-rendered apps. サーバー側でレンダリングされるアプリでは、複数のブラウザー画面で同じアプリを開くのは、通常、サーバーに対する追加のリソース要求には変換されません。In a server-rendered app, opening the same app in multiple browser screens typically doesn't translate into additional resource demands on the server. Blazor Server アプリでは、各ブラウザー画面に個別の回線が必要で、コンポーネント状態の個別のインスタンスがサーバーによって管理されます。In a Blazor Server app, each browser screen requires a separate circuit and separate instances of component state to be managed by the server.

Blazor は、ブラウザータブを閉じるか、外部 URL に移動して正常に終了することを検討します。Blazor considers closing a browser tab or navigating to an external URL a graceful termination. 正常な終了が発生した場合、回線と関連するリソースが直ちに解放されます。In the event of a graceful termination, the circuit and associated resources are immediately released. クライアントは、ネットワークの中断などによって、正常に切断されることもあります。A client may also disconnect non-gracefully, for instance due to a network interruption. Blazor Server は、クライアントが再接続できるように、接続されていない回線を構成可能な間隔で格納します。Blazor Server stores disconnected circuits for a configurable interval to allow the client to reconnect. 詳細については、「同じサーバーへの再接続」セクションを参照してください。For more information, see the Reconnection to the same server section.

UI の待機時間UI Latency

UI 待機時間とは、開始されたアクションから UI が更新されるまでにかかる時間のことです。UI latency is the time it takes from an initiated action to the time the UI is updated. アプリがユーザーに応答できるようにするには、UI の待機時間の値を小さくすることが不可欠です。Smaller values for UI latency are imperative for an app to feel responsive to a user. Blazor Server アプリでは、各アクションがサーバーに送信され、処理されて、UI diff が返されます。In a Blazor Server app, each action is sent to the server, processed, and a UI diff is sent back. その結果、UI の待機時間は、ネットワーク待機時間の合計と、アクションを処理するサーバーの待機時間です。Consequently, UI latency is the sum of network latency and the server latency in processing the action.

企業のプライベートネットワークに限定された基幹業務アプリの場合、ネットワーク待機時間による待ち時間のユーザーへの影響は、通常はなるべくです。For a line of business app that's limited to a private corporate network, the effect on user perceptions of latency due to network latency are usually imperceptible. インターネット経由で展開されたアプリの場合、ユーザーにとって待機時間が顕著になる可能性があります。ユーザーが地理的に広く分散している場合は特にそうです。For an app deployed over the Internet, latency may become noticeable to users, particularly if users are widely distributed geographically.

メモリ使用量は、アプリの待機時間に寄与する場合もあります。Memory usage can also contribute to app latency. メモリ使用量が増加すると、ガベージコレクションまたはメモリのページングが頻繁に発生します。どちらの場合も、アプリのパフォーマンスが低下し、その結果、UI の遅延が増加します。Increased memory usage results in frequent garbage collection or paging memory to disk, both of which degrade app performance and consequently increase UI latency. 詳細については、「Blazor サーバーアプリをセキュリティで保護する ASP.NET Core」を参照してください。For more information, see Blazor サーバーアプリをセキュリティで保護する ASP.NET Core.

Blazor サーバーアプリは、ネットワーク待機時間とメモリ使用量を削減することで、UI の待機時間を最小限に抑えるように最適化する必要があります。Blazor Server apps should be optimized to minimize UI latency by reducing network latency and memory usage. ネットワーク待機時間を測定する方法については、「ASP.NET Core Blazor サーバーをホストして展開する」を参照してください。For an approach to measuring network latency, see ASP.NET Core Blazor サーバーをホストして展開する. SignalR と Blazor の詳細については、次を参照してください。For more information on SignalR and Blazor, see:

同じサーバーへの再接続Reconnection to the same server

Blazor サーバーアプリには、サーバーへのアクティブな SignalR 接続が必要です。Blazor Server apps require an active SignalR connection to the server. 接続が失われた場合、アプリはサーバーへの再接続を試みます。If the connection is lost, the app attempts to reconnect to the server. クライアントの状態がまだメモリ内にある限り、クライアントセッションは状態を失うことなく再開されます。As long as the client's state is still in memory, the client session resumes without losing state.

クライアントが接続が失われたことを検出すると、クライアントが再接続しようとしているときに、既定の UI がユーザーに表示されます。When the client detects that the connection has been lost, a default UI is displayed to the user while the client attempts to reconnect. 再接続に失敗した場合、ユーザーには再試行のオプションが表示されます。If reconnection fails, the user is provided the option to retry. UI をカスタマイズするには、 _Hostページで components-reconnect-modalid を指定して、要素を定義します。To customize the UI, define an element with components-reconnect-modal as its id in the _Host.cshtml Razor page. クライアントは、接続の状態に基づいて、次のいずれかの CSS クラスを使用して、この要素を更新します。The client updates this element with one of the following CSS classes based on the state of the connection:

  • components-reconnect-show – の場合、接続が失われたことを示す UI が表示され、クライアントは再接続を試みています。components-reconnect-show – Show the UI to indicate a lost connection and the client is attempting to reconnect.
  • components-reconnect-hide @no__t クライアントにアクティブな接続がある場合は、UI を非表示にします。components-reconnect-hide – The client has an active connection, hide the UI.
  • components-reconnect-failed – の再接続に失敗しました。ネットワーク障害が原因である可能性があります。components-reconnect-failed – Reconnection failed, probably due to a network failure. 再接続を試行するには、window.Blazor.reconnect() を呼び出します。To attempt reconnection, call window.Blazor.reconnect().
  • components-reconnect-rejected – の再接続が拒否されました。components-reconnect-rejected – Reconnection rejected. サーバーに到達したが接続を拒否したため、サーバー上のユーザーの状態が失われました。The server was reached but refused the connection, and the user's state on the server is gone. アプリを再度読み込むには、location.reload() を呼び出します。To reload the app, call location.reload(). この接続状態は、次の場合に発生する可能性があります。This connection state may result when:
    • 回線のクラッシュ (サーバー側コード) が発生します。A crash in the circuit (server-side code) occurs.
    • サーバーがユーザーの状態を削除するのに十分な時間、クライアントが接続されていません。The client is disconnected long enough for the server to drop the user's state. ユーザーが操作していたコンポーネントのインスタンスは破棄されます。Instances of components that the user was interacting with are disposed.

プリレンダリング後のステートフル再接続Stateful reconnection after prerendering

Blazor サーバーアプリは、サーバーへのクライアント接続が確立される前に、サーバー上の UI を事前に作成するために既定で設定されます。Blazor Server apps are set up by default to prerender the UI on the server before the client connection to the server is established. これは、 _Hostページで設定します。This is set up in the _Host.cshtml Razor page:

<body>
    <app>@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))</app>

    <script src="_framework/blazor.server.js"></script>
</body>

RenderMode コンポーネントを構成するかどうかを構成します。RenderMode configures whether the component:

  • ページに prerendered ます。Is prerendered into the page.
  • は、ページに静的 HTML として表示されるか、ユーザーエージェントから Blazor アプリをブートストラップするために必要な情報が含まれている場合に表示されます。Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
RenderMode 説明Description
ServerPrerendered コンポーネントを静的 HTML にレンダリングし、Blazor Server アプリのマーカーを含めます。Renders the component into static HTML and includes a marker for a Blazor Server app. ユーザーエージェントが起動すると、このマーカーは Blazor アプリをブートストラップするために使用されます。When the user-agent starts, this marker is used to bootstrap a Blazor app. パラメーターはサポートされていません。Parameters aren't supported.
Server Blazor Server アプリのマーカーをレンダリングします。Renders a marker for a Blazor Server app. コンポーネントからの出力は含まれていません。Output from the component isn't included. ユーザーエージェントが起動すると、このマーカーは Blazor アプリをブートストラップするために使用されます。When the user-agent starts, this marker is used to bootstrap a Blazor app. パラメーターはサポートされていません。Parameters aren't supported.
Static コンポーネントを静的 HTML にレンダリングします。Renders the component into static HTML. パラメーターがサポートされています。Parameters are supported.

静的な HTML ページからのサーバーコンポーネントのレンダリングはサポートされていません。Rendering server components from a static HTML page isn't supported.

クライアントは、アプリの再レンダリングに使用されたのと同じ状態でサーバーに再接続します。The client reconnects to the server with the same state that was used to prerender the app. アプリの状態がまだメモリ内にある場合は、SignalR 接続が確立された後に、コンポーネントの状態が再び実行されることはありません。If the app's state is still in memory, the component state isn't rerendered after the SignalR connection is established.

Razor ページとビューからのステートフル対話型コンポーネントのレンダリングRender stateful interactive components from Razor pages and views

ステートフル対話型コンポーネントは、Razor ページまたはビューに追加できます。Stateful interactive components can be added to a Razor page or view.

ページまたはビューが表示される場合:When the page or view renders:

  • コンポーネントは、ページまたはビューと prerendered ます。The component is prerendered with the page or view.
  • プリレンダリングに使用される初期コンポーネントの状態は失われます。The initial component state used for prerendering is lost.
  • SignalR 接続が確立されると、新しいコンポーネントの状態が作成されます。New component state is created when the SignalR connection is established.

次の Razor ページでは、@no__t 0 のコンポーネントがレンダリングされます。The following Razor page renders a Counter component:

<h1>My Razor Page</h1>

@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered))

Razor ページとビューからの非対話型コンポーネントのレンダリングRender noninteractive components from Razor pages and views

次の Razor ページでは、MyComponent コンポーネントが、フォームを使用して指定された初期値を使用して静的にレンダリングされます。In the following Razor page, the MyComponent component is statically rendered with an initial value that's specified using a form:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

@(await Html.RenderComponentAsync<MyComponent>(RenderMode.Static, 
    new { InitialValue = InitialValue }))

@code {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

@No__t-0 は静的にレンダリングされるため、コンポーネントを対話形式にすることはできません。Since MyComponent is statically rendered, the component can't be interactive.

アプリがプリレンダリングされるタイミングを検出するDetect when the app is prerendering

Blazor Server アプリをプリレンダリングするときに、ブラウザーとの接続が確立されていないため、JavaScript への呼び出しなどの特定のアクションは実行できません。While a Blazor Server app is prerendering, certain actions, such as calling into JavaScript, aren't possible because a connection with the browser hasn't been established. Prerendered の場合、コンポーネントのレンダリングが異なる場合があります。Components may need to render differently when prerendered.

ブラウザーとの接続が確立されるまで、JavaScript の相互運用呼び出しを遅延するには、OnAfterRenderAsync コンポーネントライフサイクルイベントを使用できます。To delay JavaScript interop calls until after the connection with the browser is established, you can use the OnAfterRenderAsync component lifecycle event. このイベントは、アプリが完全にレンダリングされ、クライアント接続が確立された後にのみ呼び出されます。This event is only called after the app is fully rendered and the client connection is established.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div @ref="divElement">Text during render</div>

@code {
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync(
                "setElementText", divElement, "Text after render");
        }
    }
}

前のコード例では、 wwwroot/index.html (Blazor WebAssembly またはPages/_Host (Blazor Server) の <head> 要素内に JavaScript 関数 setElementText を指定します。For the preceding example code, provide a setElementText JavaScript function inside the <head> element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server). 関数は IJSRuntime.InvokeVoidAsync と共に呼び出され、値を返しません。The function is called with IJSRuntime.InvokeVoidAsync and doesn't return a value:

<!--  -->
<script>
  window.setElementText = (element, text) => element.innerText = text;
</script>

警告

前の例では、デモンストレーションのみを目的として、ドキュメントオブジェクトモデル (DOM) を直接変更しています。The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. Javascript で DOM を直接変更することは、ほとんどのシナリオでは推奨されません。これは、JavaScript が Blazor の変更の追跡に干渉する可能性があるためです。Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

次のコンポーネントは、プリレンダリングと互換性のある方法で、コンポーネントの初期化ロジックの一部として JavaScript の相互運用機能を使用する方法を示しています。The following component demonstrates how to use JavaScript interop as part of a component's initialization logic in a way that's compatible with prerendering. コンポーネントには、OnAfterRenderAsync 内からレンダリングの更新をトリガーできることが示されています。The component shows that it's possible to trigger a rendering update from inside OnAfterRenderAsync. このシナリオでは、開発者が無限ループを作成しないようにする必要があります。The developer must avoid creating an infinite loop in this scenario.

@No__t_0 が呼び出される場合、ElementRef は、コンポーネントがレンダリングされるまで JavaScript 要素が存在しないため、OnAfterRenderAsync ではなく、以前のライフサイクルメソッドでのみ使用されます。Where JSRuntime.InvokeAsync is called, ElementRef is only used in OnAfterRenderAsync and not in any earlier lifecycle method because there's no JavaScript element until after the component is rendered.

JavaScript の相互運用呼び出しから取得された新しい状態をコンポーネントにレンダリングするために、StateHasChanged が呼び出されます。StateHasChanged is called to rerender the component with the new state obtained from the JavaScript interop call. このコードでは、infoFromJsnull 場合にのみ StateHasChanged が呼び出されるため、無限ループは作成されません。The code doesn't create an infinite loop because StateHasChanged is only called when infoFromJs is null.

@page "/prerendered-interop"
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<p>
    Get value via JS interop call:
    <strong id="val-get-by-interop">@(infoFromJs ?? "No value yet")</strong>
</p>

Set value via JS interop call:
<div id="val-set-by-interop" @ref="divElement"></div>

@code {
    private string infoFromJs;
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && infoFromJs == null)
        {
            infoFromJs = await JSRuntime.InvokeAsync<string>(
                "setElementText", divElement, "Hello from interop call!");

            StateHasChanged();
        }
    }
}

前のコード例では、 wwwroot/index.html (Blazor WebAssembly またはPages/_Host (Blazor Server) の <head> 要素内に JavaScript 関数 setElementText を指定します。For the preceding example code, provide a setElementText JavaScript function inside the <head> element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server). 関数は IJSRuntime.InvokeAsync を指定して呼び出され、値を返します。The function is called with IJSRuntime.InvokeAsync and returns a value:

<script>
  window.setElementText = (element, text) => {
    element.innerText = text;
    return text;
  };
</script>

警告

前の例では、デモンストレーションのみを目的として、ドキュメントオブジェクトモデル (DOM) を直接変更しています。The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. Javascript で DOM を直接変更することは、ほとんどのシナリオでは推奨されません。これは、JavaScript が Blazor の変更の追跡に干渉する可能性があるためです。Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

Blazor Server アプリ用に SignalR クライアントを構成するConfigure the SignalR client for Blazor Server apps

場合によっては、Blazor サーバーアプリによって使用される SignalR クライアントを構成する必要があります。Sometimes, you need to configure the SignalR client used by Blazor Server apps. たとえば、接続の問題を診断するために、SignalR クライアントのログ記録を構成することができます。For example, you might want to configure logging on the SignalR client to diagnose a connection issue.

Pages/_Hostファイルで SignalR クライアントを構成するには、次のようにします。To configure the SignalR client in the Pages/_Host.cshtml file:

  • Blazorスクリプトの <script> タグに autostart="false" 属性を追加します。Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • @No__t-0 を呼び出し、SignalR builder を指定する構成オブジェクトを渡します。Call Blazor.start and pass in a configuration object that specifies the SignalR builder.
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging(2); // LogLevel.Information
    }
  });
</script>

その他の技術情報Additional resources