Compartir a través de

Representación previa de componentes de Razor de ASP.NET Core

Nota:

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 10 de este artículo.

En este artículo se explican Razor los escenarios de representación previa de componentes para los componentes representados por el servidor en Blazor Web Applas aplicaciones y Blazor Server .

La representación previa es el proceso de representación estática del contenido de la página desde el servidor para entregar HTML al explorador lo más rápido posible. Una vez que el contenido representado previamente se muestra rápidamente al usuario, se representa el contenido interactivo con controladores de eventos activos, reemplazando cualquier contenido que se haya representado anteriormente. La representación previa también puede mejorar la optimización del motor de búsqueda (SEO) mediante la representación del contenido de la respuesta HTTP inicial que los motores de búsqueda usan para calcular la clasificación de páginas.

La representación previa está habilitada de forma predeterminada para componentes interactivos.

La navegación interna con enrutamiento interactivo no usa la representación previa porque la página ya es interactiva. Para obtener más información, consulte Enrutamiento estático frente a interactivo y enrutamiento interactivo y representación previa.

No se llama a los eventos de ciclo de vida del componente al representar previamente, solo después de que el componente se represente de forma interactiva.OnAfterRender{Async}

Deshabilitar la representación previa

La representación previa puede complicar una aplicación porque los componentes de Razor la aplicación deben representarse dos veces: una para la representación previa y una vez para configurar la interactividad. Si los componentes están configurados para ejecutarse en WebAssembly, también debe diseñar los componentes para que se puedan ejecutar desde el servidor y el cliente.

Para deshabilitar la representación previa de una instancia de componente, pase la marca prerender con un valor de false para representar el modo:

  • <... @rendermode="new InteractiveServerRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveAutoRenderMode(prerender: false)" />

Para deshabilitar la representación previa en una definición de componente:

  • @rendermode @(new InteractiveServerRenderMode(prerender: false))
  • @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
  • @rendermode @(new InteractiveAutoRenderMode(prerender: false))

Para deshabilitar la representación previa para toda la aplicación, indique el modo de representación en el componente interactivo de nivel más alto de la jerarquía de componentes de la aplicación que no es un componente raíz.

En el caso de las aplicaciones basadas en la plantilla de proyecto de Blazor Web App, suele especificarse un modo de representación asignado a toda la aplicación donde se usa el componente Routes en el componente App (Components/App.razor). En el ejemplo siguiente se establece el modo de representación de la aplicación en Servidor interactivo con la representación previa deshabilitada:

<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Además, deshabilite la representación previa para el componente HeadOutlet en el componente App:

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />

No se admite la creación de un componente raíz, como el componente App, interactivo con la directiva @rendermode en la parte superior del archivo de definición del componente raíz (.razor). Por lo tanto, el componente App no puede deshabilitar la representación previa directamente.

Deshabilitar la representación previa mediante las técnicas anteriores solo surte efecto para los modos de representación de nivel superior. Si un componente primario especifica un modo de representación, se omite la configuración de representación previa de sus elementos secundarios.

Conservación del estado previamente representado

Si no se conserva el estado representado previamente, se pierde el estado usado durante la representación previa, por lo que se debe volver a crear una vez que la aplicación se haya cargado por completo. Si se crea un estado de forma asincrónica, la interfaz de usuario puede parpadear a medida que se reemplaza la interfaz de usuario prerepresentada cuando se vuelve a representar el componente. Para obtener instrucciones sobre cómo conservar el estado durante la representación previa, consulte ASP.NET persistencia de estado preprotegenado de CoreBlazor.

Los servicios del lado cliente no se resuelven durante la representación previa

Suponiendo que la representación previa no está deshabilitada para un componente o para la aplicación, un componente del proyecto .Client se representa previamente en el servidor. Dado que el servidor no tiene acceso a los servicios Blazor registrados del lado cliente, no es posible insertar estos servicios en un componente sin recibir un error que indica que el servicio no se puede encontrar durante la representación previa.

Por ejemplo, considera el siguiente componente Home en el proyecto .Client de una Blazor Web App con WebAssembly interactivo global o representación automática interactiva global. El componente intenta insertar IWebAssemblyHostEnvironment para obtener el nombre del entorno.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    Environment: @Environment.Environment
</p>

No se produce ningún error en tiempo de compilación, pero se produce un error en tiempo de ejecución durante la representación previa:

No se puede proporcionar un valor para la propiedad "Environment" en el tipo "BlazorSample.Client.Pages.Home". No hay ningún servicio registrado de tipo "Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment".

Este error se produce porque el componente debe compilarse y ejecutarse en el servidor durante la representación previa, pero IWebAssemblyHostEnvironment no es un servicio registrado en el servidor.

Tenga en cuenta cualquiera de los enfoques siguientes para abordar este escenario:

Registrar el servicio en el servidor además del cliente

Si el servicio admite la ejecución del servidor, registre el servicio en el servidor además del cliente para que esté disponible durante la representación previa. Para obtener un ejemplo de este escenario, consulte la guía de HttpClient servicios de la Blazor Web App sección API web externa del artículo Call web API (Llamar a api web ).

Inserción de un servicio que la aplicación puede usar durante la representación previa

En algunos casos, la aplicación puede usar un servicio en el servidor durante la representación previa y otro servicio en el cliente.

Por ejemplo, el código siguiente obtiene el entorno de la aplicación si el código se ejecuta en el servidor o en el cliente mediante la inserción IHostEnvironment desde el Microsoft.Extensions.Hosting.Abstractions paquete NuGet:

private string? environmentName;

public Home(IHostEnvironment? serverEnvironment = null, 
    IWebAssemblyHostEnvironment? wasmEnvironment = null)
{
    environmentName = serverEnvironment?.EnvironmentName;
    environmentName ??= wasmEnvironment?.Environment;
}

Sin embargo, este enfoque agrega una dependencia adicional al proyecto de cliente que no es necesario.

Convertir el servicio en opcional

Haga que el servicio sea opcional si no es necesario durante la representación previa mediante cualquiera de los métodos siguientes.

En el ejemplo siguiente se usa la inyección de constructor de IWebAssemblyHostEnvironment:

private string? environmentName;

public Home(IWebAssemblyHostEnvironment? env = null)
{
    environmentName = env?.Environment;
}

Como alternativa, inserte IServiceProvider para obtener opcionalmente el servicio si está disponible:

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IServiceProvider Services

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    <b>Environment:</b> @environmentName
</p>

@code {
    private string? environmentName;

    protected override void OnInitialized()
    {
        if (Services.GetService<IWebAssemblyHostEnvironment>() is { } env)
        {
            environmentName = env.Environment;
        }
    }
}

Crea una abstracción de servicio

Si se necesita una implementación de servicio diferente en el servidor, cree una abstracción de servicio y cree implementaciones para el servicio en los proyectos de servidor y cliente. Registre los servicios en cada proyecto. Inserte la abstracción de servicio personalizada en componentes cuando sea necesario. A continuación, el componente depende únicamente de la abstracción del servicio personalizado.

En el caso de IWebAssemblyHostEnvironment, podemos reutilizar la interfaz existente en lugar de crear una nueva:

ServerHostEnvironment.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Components;

public class ServerHostEnvironment(IWebHostEnvironment env, NavigationManager nav) : 
    IWebAssemblyHostEnvironment
{
    public string Environment => env.EnvironmentName;
    public string BaseAddress => nav.BaseUri;
}

En el archivo Program del proyecto de servidor, registre el servicio:

builder.Services.TryAddScoped<IWebAssemblyHostEnvironment, ServerHostEnvironment>();

En este momento, el IWebAssemblyHostEnvironment servicio se puede inyectar en un componente interactivo de WebAssembly o Auto que también se prerenderiza desde el servidor.

Deshabilitación de la representación previa para el componente

Deshabilite la representación previa para el componente o para toda la aplicación. Para obtener más información, consulte la sección Deshabilitar representación previa .

  • Last updated on