Desde la aparición de Blazor y sus distintos tipos de hosting de componentes (SSR, Server, WebAssembly), se intentó promover que estos fueran agnósticos respecto a su modo de ejecución. Sin embargo, en la práctica esto no es siempre posible, y en ocasiones necesitamos saber en qué modo se está ejecutando un componente para poder adaptarlo a las necesidades de la aplicación.

Hace más de un año, cuando aún Blazor 8 era la versión más reciente de este framework, vimos por aquí un truco para detectar si un componente Blazor estaba ejecutándose de forma estática (SSR) o interactiva. Y algunos años antes, ya habíamos visto también distintas formas para detectar si un componente interactivo estaba corriendo sobre Blazor Server o Blazor WebAssembly.

Aunque las soluciones propuestas funcionaban bien y solucionaban nuestro problema, eran simplemente trucos (o "hacks", algo retorcidos en algunos casos) para cubrir unas necesidades que no estaban bien resueltas desde el propio framework.

Con .NET 9 esto cambió, y desde esta versión de Blazor ya existen mecanismos nativos para detectar cuándo un componente se ejecuta en modo estático o interactivo, y en este último caso, qué modo de renderizado se está utilizando.

Vamos a ver cómo conseguirlo.

La propiedad RendererInfo

La propiedad RendererInfo de la clase ComponentBase, y por tanto accesible desde cualquier componente Blazor, permite obtener información sobre el renderizador que está utilizando el componente en el momento de consultarla.

Esta propiedad devuelve un objeto de tipo RendererInfo, definido por Blazor en el espacio de nombres Microsoft.AspNetCore.Components de la siguiente forma:

public sealed class RendererInfo(string rendererName, bool isInteractive)
{
    public string Name { get; } = rendererName;
    public bool IsInteractive { get; } = isInteractive;
}

La propiedad Name indica el nombre del renderizador que se está utilizando, que puede ser "Server", "Static" o "WebAssembly".

Por otra parte, la propiedad IsInteractive indica si el renderizador es interactivo o no. En el caso de Blazor Server y Blazor WebAssembly, esta propiedad será true, mientras que en el caso de Blazor SSR (renderización estática, no interactiva), será false.

Vamos a ver un ejemplo de su uso. El siguiente componente Counter.razor muestra la clásica página con el contador que encontramos en las plantillas de proyecto Blazor, aunque en esta ocasión, modificamos el atributo disabled del elemento en función de si el componente se está renderizando de forma interactiva o no:

@page "/counter"
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount" 
        disabled="@(!RendererInfo.IsInteractive)">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Si introducimos este componente en un proyecto Blazor interactivo y accedemos a él, veremos que inicialmente el botón aparece desactivado en el navegador. Algo más tarde, cuando se activan los mecanismos de interactividad, el componente se renderizará de nuevo, ya de forma interactiva, y el botón se activará.

Además de la propiedad RendererInfo, en Blazor 9 también se añadió a ComponentBase la propiedad AssignedRenderMode, de tipo IComponentRenderMode?. Esta propiedad contiene el objeto que representa el modo de renderizado asignado al componente inicialmente mediante la directiva @rendermode, ya sea en su propio código o bien en el de alguno de sus antecesores en la jerarquía. Cuando el componente usa Server-side Rendering, su valor es siempre null.

Podemos ver el contenido de estas propiedades insertando el siguiente bloque de código en cualquier componente:

<p>
    Renderización: @this.RendererInfo.Name, 
    Interactividad:  @RendererInfo.IsInteractive, 
    Modo inicial: @(AssignedRenderMode?.GetType().Name ?? "SSR")
</p>

¡Espero que os resulte útil!

Publicado en: www.variablenotfound.com.