--- no-loc: [Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] --- *This section applies to Blazor Server and hosted Blazor WebAssembly apps that prerender Razor components.* While an app is prerendering, certain actions, such as calling into JavaScript, aren't possible. Components may need to render differently when prerendered. To delay JavaScript interop calls until a point where such calls are guaranteed to work, override the [`OnAfterRender{Async}` lifecycle event](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync). This event is only called after the app is fully rendered. `Pages/PrerenderedInterop1.razor`: ::: moniker range=">= aspnetcore-5.0" [!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/prerendering/PrerenderedInterop1.razor)] ::: moniker-end ::: moniker range="< aspnetcore-5.0" [!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/prerendering/PrerenderedInterop1.razor)] ::: moniker-end For the preceding example code, provide a `setElementText1` JavaScript function inside the `` element of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server). The function is called with and doesn't return a value: ```html ``` > [!WARNING] > **The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only.** Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking. > [!NOTE] > The preceding example pollutes the client with global methods. For a better approach in production apps, see [Blazor JavaScript isolation and object references](xref:blazor/call-javascript-from-dotnet#blazor-javascript-isolation-and-object-references). > > Example: > > ```javascript > export setElementText1 = (element, text) => element.innerText = text; > ``` 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. The component shows that it's possible to trigger a rendering update from inside . The developer must be careful to avoid creating an infinite loop in this scenario. Where is called, `ElementRef` is only used in and not in any earlier lifecycle method because there's no JavaScript element until after the component is rendered. [`StateHasChanged`](xref:blazor/components/lifecycle#state-changes-statehaschanged) is called to rerender the component with the new state obtained from the JavaScript interop call (for more information, see ). The code doesn't create an infinite loop because `StateHasChanged` is only called when `infoFromJs` is `null`. `Pages/PrerenderedInterop2.razor`: ::: moniker range=">= aspnetcore-5.0" [!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/prerendering/PrerenderedInterop2.razor)] ::: moniker-end ::: moniker range="< aspnetcore-5.0" [!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/prerendering/PrerenderedInterop2.razor)] ::: moniker-end For the preceding example code, provide a `setElementText2` JavaScript function inside the `` element of `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server). The function is called with and returns a value: ```html ``` > [!WARNING] > **The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only.** Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking. > [!NOTE] > The preceding example pollutes the client with global methods. For a better approach in production apps, see [Blazor JavaScript isolation and object references](xref:blazor/call-javascript-from-dotnet#blazor-javascript-isolation-and-object-references). > > Example: > > ```javascript > export setElementText2 = (element, text) => { > element.innerText = text; > return text; > }; > ```