Integrar componentes principais Razor do ASP.NET com MVC ou Razor Pages em soluções hospedadas Blazor WebAssembly

Observação

As soluções hospedadas Blazor WebAssembly continuam com suporte, mas o modelo de projeto foi removido e não tem mais suporte no .NET 8 ou posterior. Este artigo aparece no sumário até o .NET 7 para referência, mas observe que o .NET 7 é uma versão do Termo de Suporte Padrão que não tem mais suporte.

Aviso

Esta versão do ASP.NET Core não tem mais suporte. Para obter mais informações, consulte a Política de Suporte do .NET e do .NET Core.

Este artigo explica Razor cenários de integração de componentes para aplicativos hospedados Blazor WebAssembly , incluindo a pré-renderização de Razor componentes no servidor.

Importante

As alterações de estrutura entre versões da ASP.NET Core levaram a diferentes conjuntos de instruções neste artigo. Antes de usar as diretrizes deste artigo, confirme se o seletor de versão do documento na parte superior deste artigo corresponde à versão do ASP.NET Core que você pretende usar para seu aplicativo.

A pré-renderização pode melhorar a SEO (Otimização do Mecanismo de Pesquisa), ao renderizar conteúdos de resposta ao HTTP inicial no quais os mecanismos de pesquisa podem usar para calcular a classificação da página.

Configuração da solução

Configurações de pré-renderização

Para configurar a pré-renderização de um aplicativo hospedadoBlazor WebAssembly:

1. Hospede oBlazor WebAssembly aplicativo em um aplicativo ASP.NET Core. Um aplicativo independenteBlazor WebAssembly pode ser adicionado a uma solução ASP.NET Core assim como a um aplicativo hospedadoBlazor WebAssembly, criado a partir do Blazor WebAssembly modelo de projeto com a opção hospedada:

   • Visual Studio: na caixa de diálogoInformações adicionais, marque a opção ASP.NET Core Hospedado ao criar oBlazor WebAssembly aplicativo. Nos exemplos deste artigo, a solução é denominadaBlazorHosted.
   • Shell de comando da CLI do Visual Studio Code/.NET: dotnet new blazorwasm -ho (use a opção -ho|--hosted). Use a opção -o|--output {LOCATION} para criar uma pasta para a solução e definir os namespaces da solução de projeto. Nos exemplos deste artigo, a solução é denominada BlazorHosted(dotnet new blazorwasm -ho -o BlazorHosted).

   Nos exemplos deste artigo, o nome da solução hospedada (nome do assembly) é BlazorHosted. O namespace do projeto do cliente é BlazorHosted.Cliente o namespace do projeto do servidor éBlazorHosted.Server.

2. Excluir arquivo wwwroot/index.html do projeto Blazor WebAssemblyClient .

3. Client No projeto, exclua as seguintes linhas emProgram.cs:

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Adicionar _Host.cshtml arquivo à pasta Pages do projeto Server . É possível obter os arquivos de um projeto criado a partir do modelo usando oBlazor Server Visual Studio ou a CLI do .NET com o dotnet new blazorserver -o BlazorServercomando em um shell de comando (a opção -o BlazorServer cria uma pasta para o projeto). Depois de colocar os arquivos na pasta Server do projeto Pages, faça as seguintes alterações nos arquivos.

   Faça as seguintes alterações no arquivo_Host.cshtml:

   • Atualize o namespace Pages na parte superior do arquivo para corresponder ao namespace das páginas Server do aplicativo. O espaço reservado {APP NAMESPACE} no exemplo a seguir representa o namespace das páginas do aplicativo doador que forneceu o arquivo_Host.cshtml:

     Excluir:

     - @namespace {APP NAMESPACE}.Pages
     

     Adicionar:

     @namespace BlazorHosted.Server.Pages
     

   • Adicionar uma diretriz@usingpara o projetoClient na parte superior do arquivo:

     @using BlazorHosted.Client
     

   • Atualize os links da folha de estilos para apontar para as folhas de estilos do projeto WebAssembly. No exemplo a seguir, o namespace do projeto do cliente é BlazorHosted.Client. O espaço reservado {APP NAMESPACE}representa o namespace do aplicativo doador que forneceu o arquivo _Host.cshtml. Atualize o Auxiliar de Marca de Componente (<component>tag) para o HeadOutlet componente pré-renderizar o componente.

     Excluir:

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
     - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     

     Adicionar:

     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
     

     Observação

     Deixe o elemento <link> de solicitação da folha de estilos Bootstrap (css/bootstrap/bootstrap.min.css) no lugar.

   • Atualize a origem doBlazor script para usar o scriptBlazor WebAssembly do cliente:

     Excluir:

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

     Adicionar:

     <script src="_framework/blazor.webassembly.js"></script>
     

   • Atualize o render-mode do Auxiliar de Marca de Componente para pré-renderizar o componente raiz App com:WebAssemblyPrerendered

     Excluir:

     - <component type="typeof(App)" render-mode="ServerPrerendered" />
     

     Adicionar:

     <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
     

     Importante

     A pré-renderização não é compatível com pontos de extremidade de autenticação (/authentication/ segmento de caminho). Para obter mais informações, consulte Cenários de segurança adicionais de Blazor WebAssembly no ASP.NET Core.

5. Program.cs No arquivo do Server projeto, altere o ponto de extremidade do fallback doindex.html arquivo para a _Host.cshtml página:

   Excluir:

   - app.MapFallbackToFile("index.html");
   

   Adicionar:

   app.MapFallbackToPage("/_Host");
   

6. Caso os projetosClient e Server utilizem um ou mais serviços em comum durante a pré-renderização, considere que os registros de serviço em um método podem ser chamados de ambos os projetos. Para saber mais, confira Injeção de dependência do Blazor no ASP.NET Core.

7. Execute o projeto Server. O aplicativo hospedado Blazor WebAssembly é pré-renderizado pelo Server projeto para clientes.

Configuração para incorporar Razor componentes em páginas ou visualizações

As seções e exemplos a seguir para inserir Razor componentes do ClientBlazor WebAssembly aplicativo em páginas ou exibições do aplicativo de servidor exigem configuração adicional.

O projeto Server deve ter os seguintes arquivos e pastas.

RazorPages:

• Pages/Shared/_Layout.cshtml
• Pages/Shared/_Layout.cshtml.css
• Pages/_ViewImports.cshtml
• Pages/_ViewStart.cshtml

MVC:

• Views/Shared/_Layout.cshtml
• Views/Shared/_Layout.cshtml.css
• Views/_ViewImports.cshtml
• Views/_ViewStart.cshtml

Os arquivos anteriores podem ser obtidos ao gerar um aplicativo usando os modelos de projeto do ASP.NET Core:

• Novas ferramentas de criação de projeto do Visual Studio.
• Ao abrir um shell de comando e executar dotnet new webapp -o {PROJECT NAME} (Razor Pages) ou dotnet new mvc -o {PROJECT NAME} (MVC). A opção -o|--output com um valor para o {PROJECT NAME} espaço reservado fornece um nome e cria uma pasta para o aplicativo.

Atualize os namespaces no arquivo importado _ViewImports.cshtml para corresponder aos usados pelo projeto Server que recebe os arquivos.

Pages/_ViewImports.cshtml (PagesRazor):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Atualize o arquivo importado do layout Pages/Shared/_Layout.cshtml para Razor Pages ou Views/Shared/_Layout.cshtmlpara MVC.

Primeiramente, exclua o título e a folha de estilos do projeto do doador, que está RPDonor.styles.css no exemplo a seguir. O espaço reservado {PROJECT NAME} representa o nome do aplicativo do projeto do doador.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Inclua os estilos do projeto Client no arquivo de layout. No exemplo a seguir, o namespace Client do projeto do cliente é BlazorHosted.Client. O elemento <title> pode ser atualizado ao mesmo tempo.

Coloque as seguintes linhas no conteúdo <head> do arquivo de layout:

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

O layout importado contém doisHome (Index página) e Privacy links de navegação. Para fazer com que os Home links sigam para o aplicativo hospedadoBlazor WebAssembly, altere os hiperlinks:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Em um arquivo de layout MVC:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Atualize o nome do aplicativo do elemento <footer>. O exemplo a seguir usa o nome do aplicativoBlazorHosted:

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

No exemplo anterior, o {DATE} espaço reservado representa a data de direitos autorais em um aplicativo gerado a partir do Razor modelo de projeto do Pages ou MVC.

Para fazer com que o link do Privacy leve a uma página de privacy (Páginas do Razor), adicione uma página de privacy ao projeto Server.

Pages/Privacy.cshtml no projeto Server:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Para uma visualização de privacy baseada em MVC, crie uma exibição de privacy no projeto Server.

View/Home/Privacy.cshtmlNo projetoServer:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Home No controle do aplicativo MVC, retorne a exibição.

Adicione o seguinte código ao Controllers/HomeController.cs:

public IActionResult Privacy()
{
    return View();
}

Ao importar arquivos de um aplicativo doador, atualize todos os namespaces nos arquivos para corresponder ao do projeto Server (por exemplo,BlazorHosted.Server).

Importe ativos estáticos para o projeto Server da pasta do projeto do doador wwwroot:

• wwwroot/css pasta e conteúdo
• wwwroot/js pasta e conteúdo
• wwwroot/lib pasta e conteúdo

Se o projeto do doador for criado a partir de um modelo de projeto ASP.NET Core e os arquivos não forem modificados, será possível copiar wwwroot a pasta completa do projeto do doador para o Server projeto e remover o arquivo de favicon ícone.

Aviso

Evite colocar o ativo estático nas pastas Client e Server wwwroot. Se o mesmo arquivo estiver presente em ambas as pastas, uma exceção será gerada porque os recursos estáticos compartilham o mesmo diretório raiz na rede. Portanto, hospede um recurso estático em qualquer uma das wwwroot pastas, não em ambas.

Ao adotar a configuração anterior, encorporeRazor componentes nas páginas ou exibições do Serverprojeto. Use as diretrizes nas seguintes seções deste artigo:

• Renderizar componentes em uma página ou exibição com o Auxiliar de Marca de Componente
• Renderizar componentes em uma página ou exibição com um seletor CSS

Renderizar componentes em uma página ou exibição com o Auxiliar de Marca de Componente

Depois de configurar a solução, inclusive a configuração adicional, o Auxiliar de Marca de Componentedará suporte aos dois modos de renderização para renderizar um componente de um Blazor WebAssembly aplicativo em uma página ou exibição:

• WebAssembly
• WebAssemblyPrerendered

No exemplo do Pages a seguirRazor, o Countercomponente é renderizado em uma página. Para tornar o componente interativo, o script Blazor WebAssembly é incluído na seção de renderização da página . Para evitar usar o namespace completo para o Counter componente com o Auxiliar de Marca de Componente ({ASSEMBLY NAME}.Pages.Counter), adicione uma @using diretriz para o namespace do Pages projeto do cliente. No exemplo a seguir, o namespace Client do projeto do cliente é BlazorHosted.Client.

No projeto Server, Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Execute o projeto Server. Navegue até a página Razor em /razorpagescounter1. O componente pré-renderizadoCounter é encorpado na página.

RenderMode configura-se quando o componente:

• É pré-renderizado na página.
• É renderizado como HTML estático na página ou se as informações necessárias para inicializar um Blazor aplicativo do agente do usuário estão inclusas.

Para mais informações sobre o Auxiliar de Marca de Componente, incluindo a passagem de parâmetros e RenderMode a configuração, confira o Auxiliar de Marca de Componente no ASP.NET Core.

Trabalho adicional pode ser necessário a depender dos recursos estáticos que os componentes usam e como as páginas de layout são organizadas em um aplicativo. Normalmente, os scripts são adicionados à seção de renderização de uma página ou exibição Scriptse folhas de estilo são adicionadas ao conteúdo do elemento do <head> layout.

Definir conteúdo filho por meio de um fragmento de renderização

O Auxiliar de Marca de Componente não dá suporte ao recebimento de um RenderFragment representante para conteúdo filho (por exemplo, param-ChildContent="..."). É recomendável criar um componente Razor (.razor) que referencie o componente que você deseja renderizar com o conteúdo filho que você deseja passar e, em seguida, invoque o componente da página ou exibição Razor.

Garantir que os componentes pré-renderizados de nível superior não sejam cortados na publicação

Se um Auxiliar de Marca de Componente fizer referência direta a um componente de uma biblioteca que está sujeito a corte na publicação, o componente poderá ser cortado durante a publicação porque não há referências a ele no código do aplicativo do cliente. Como resultado, o componente não é pré-renderizado, deixando um espaço em branco na saída. Se for o caso, instrua o corte a preservar o componente de biblioteca adicionando um DynamicDependency atributo a qualquer classe no aplicativo do cliente. Para preservar um componente chamado SomeLibraryComponentToBePreserved, adicione o seguinte a qualquer componente:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

A abordagem anterior geralmente não é necessária porque, na maioria dos casos, o aplicativo pré-renderiza seus componentes (que não são cortados), o que, por sua vez, referencia componentes de bibliotecas (fazendo com que eles também não sejam cortados). DynamicDependency Apenas use explicitamente para pré-renderizar um componente de biblioteca diretamente quando a biblioteca estiver sujeita a corte.

Renderizar componentes em uma página ou exibição com um seletor CSS

Depois deconfigurar a solução, incluindo a configuração adicional, adicione componentes raiz ao Client projeto de uma solução hospedada Blazor WebAssembly no Program.cs arquivo. No exemplo a seguir, o Counter componente é declarado como um componente raiz com um seletor CSS que seleciona o elemento comid as combinaçõescounter-component. No exemplo a seguir, o namespace Client do projeto do cliente é BlazorHosted.Client.

No Program.cs arquivo do projeto Client, adicione o namespace para os componentes do Razor projeto na parte superior do arquivo:

using BlazorHosted.Client.Pages;

Depois que o builder estiver estabelecido em Program.cs, adicione o Counter componente como um componente raiz:

builder.RootComponents.Add<Counter>("#counter-component");

No exemplo do Pages a seguirRazor, o Countercomponente é renderizado em uma página. Para tornar o componente interativo, o script Blazor WebAssembly é incluído na seção de renderização da página .

No projeto Server, Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Execute o projeto Server. Navegue até a página Razor em /razorpagescounter2. O componente pré-renderizadoCounter é encorpado na página.

Trabalho adicional pode ser necessário a depender dos recursos estáticos que os componentes usam e como as páginas de layout são organizadas em um aplicativo. Normalmente, os scripts são adicionados à seção de renderização de uma página ou exibição Scriptse folhas de estilo são adicionadas ao conteúdo do elemento do <head> layout.

Observação

O exemplo anterior gera umJSException se umBlazor WebAssembly aplicativo for pré-renderizado e integrado aos Razor aplicativos Pages ou MVC simultaneamente com o uso de um seletor CSS. Navegar até um dos Client componentes do Razor projeto ou navegar até uma página ou exibição do Server com um componente encorporado lança um ou mais JSException.

Este é um comportamento normal porque a pré-renderização e a integração de um Blazor WebAssembly aplicativo com componentes roteáveis Razor são incompatíveis com o uso de seletores CSS.

Se você estiver trabalhando com os exemplos nas seções anteriores e quiser apenas conferir o trabalho do seletor de CSS em seu aplicativo de amostra, comente a especificação do App componente raiz do Client arquivo do Program.cs projeto:

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Navegue até a página ou exibição com o componente encorporado Razor que usa um seletor CSS (tal como/razorpagescounter2 o exemplo anterior). A página ou exibição carrega com o componente encorporado e as funções de componente são incorporadas conforme o esperado.

Persistência do estado pré-renderizado

Sem a persistência do estado pré-renderizado, há perda do estado usado durante a pré-renderização e ele deve ser recriado quando o aplicativo for totalmente carregado. Se qualquer estado for configurado de forma assíncrona, a interface do usuário poderá cintilar à medida que a interface do usuário pré-renderizada for substituída por espaços reservados temporários e totalmente renderizada outra vez.

Para persistir o estado em componentes pré-renderizados, use o Auxiliar de Marcação de Estado do Componente Persistente (fonte de referência). Adicione a marca do Auxiliar de Marca, <persist-component-state />, dentro da marca de fechamento </body> da página _Host em um aplicativo que remete componentes.

Observação

Os links de documentação para a fonte de referência do .NET geralmente carregam o branch padrão do repositório, que representa o desenvolvimento atual da próxima versão do .NET. Para selecionar uma marca para uma versão específica, use a lista suspensa para Alternar branches ou marcas. Para saber mais, confira Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Em Pages/_Host.cshtml de Blazor aplicativos que são WebAssembly pré-renderizados (WebAssemblyPrerendered) em um aplicativo hospedado Blazor WebAssembly :

<body>
    ...

    <persist-component-state />
</body>

Decida qual estado persistir usando o serviço PersistentComponentState. PersistentComponentState.RegisterOnPersisting registra um retorno de chamada para a persistência do estado do componente antes que o aplicativo seja pausado. Há recuperação do estado com a retomada do aplicativo.

No exemplo a seguir:

• O espaço reservado {TYPE} representa o tipo de dados a ser persistido (por exemplo, WeatherForecast[]).
• O espaço reservado {TOKEN} é uma cadeia de caracteres de identificador de estado (por exemplo, fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

O exemplo a seguir é uma versão atualizada do FetchData componente em um aplicativo hospedado Blazor WebAssembly com base no modelo doBlazor projeto. O componenteWeatherForecastPreserveState persiste no estado de previsão do tempo durante a pré-renderização e em seguida, recupera o estado para inicializar o componente. O Auxiliar de Marca de Estado do Componente Persistente persiste o estado do componente após todas as invocações de componente.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Ao inicializar componentes com o mesmo estado usado durante a pré-renderização, todas as etapas de inicialização dispendiosa só são executadas uma vez. A interface do usuário renderizada também corresponde à interface do usuário pré-renderizada, portanto, nenhuma cintilação ocorre no navegador.

O estado pré-renderizado persistente é transferido para o cliente, onde é usado para restaurar o estado do componente. Para pré-renderização em um aplicativo hospedado Blazor WebAssembly , os dados são expostos ao navegador e não devem conter informações confidenciais e privadas.

Recursos Blazor WebAssembly adicionais

• Gerenciamento de estado: controlar pré-renderização
• Suporte de pré-renderização com carregamento de assembly lento
• Razorobjetos do ciclo de vida do componente que são pertencentes à pré-renderização
  • inicialização de componente (OnInitialized{Async})
  • após a renderização do componente (OnAfterRender{Async})
  • Reconexão dinâmica após pré-renderização : Embora o conteúdo na seção se concentre em Blazor Server e a reconexão SignalR dinâmica , o cenário de pré-renderização nos aplicativos Blazor WebAssembly hospedados (WebAssemblyPrerendered) envolve condições e abordagens semelhantes para impedir que o código do desenvolvedor seja executado duas vezes. Para preservar o estado durante a execução do código de inicialização ao pré-renderizar, consulte a seção Persistir estado pré-renderizado deste artigo.
  • Pré-renderização com interoperabilidade do JavaScript
• Entidades de autenticação e autorização que pertencem à pré-renderização
  • aspectos gerais
  • Pré-renderizar com autenticação em aplicativos Blazor WebAssembly hospedados
• Hospedar e implantar: Blazor WebAssembly
• Lidar com erros: pré-renderização
• OnNavigateAsync é executado duas vezes ao pré-renderizar: Manipular eventos de navegação assíncronos com OnNavigateAsync