Blazor es una herramienta poderosa de Microsoft para crear aplicaciones web interactivas usando C#. Con Blazor, los desarrolladores pueden crear aplicaciones que se ejecutan tanto en el servidor como en el cliente utilizando diferentes modos de renderizado. En versiones anteriores de .NET, los desarrolladores tenían que elegir entre Blazor Server y Blazor WebAssembly. Sin embargo, con la introducción de .NET 8, ahora hay un tercer modo: el renderizado estático del lado del servidor (SSR estático), que es el nuevo modo predeterminado.

¿Qué es el renderizado estático del lado del servidor?

El renderizado estático del lado del servidor es un modo de renderizado no interactivo que se utiliza en Blazor para generar las páginas de una aplicación. En este modelo, el servidor procesa las solicitudes y devuelve directamente el HTML renderizado al navegador sin mantener una conexión persistente de socket web ni utilizar WebAssembly.

Cuando se crea una aplicación Blazor en .NET 8, el modo de renderizado estático del lado del servidor se utiliza por defecto si no se especifica otro tipo de renderizado en el archivo de configuración. Este modo ofrece una experiencia más eficiente al reducir la sobrecarga en el servidor y eliminar la necesidad de conexiones continuas, lo que mejora el rendimiento de la aplicación.

Ventajas del renderizado estático del lado del servidor

Una de las mayores ventajas de este modo de renderizado es la simplicidad y eficiencia del proceso de solicitud/respuesta clásico de HTTP. El cliente realiza una solicitud al servidor, y este envía el HTML renderizado sin la necesidad de interactividad en tiempo real.

El renderizado estático del lado del servidor proporciona un mejor rendimiento al reducir la complejidad de la arquitectura, ya que no depende de tecnologías como SignalR o WebAssembly. Además, si se utiliza almacenamiento en caché para las respuestas de páginas renderizadas de esta manera, el rendimiento puede mejorar aún más, haciendo que las aplicaciones web sean más rápidas y responsivas.

Cómo configurar el renderizado estático del lado del servidor en Blazor

Para comenzar a usar SSR estático, solo necesitas crear una aplicación Blazor con la plantilla predeterminada y, al seleccionar «ninguno» como modo de renderizado interactivo, habilitarás este tipo de renderizado.

El archivo Program.cs de la aplicación debe incluir configuraciones específicas para habilitar el soporte de SSR estático. A continuación se muestra el fragmento de código para configurar una aplicación Blazor con SSR estático:

builder.Services.AddRazorComponents();
app.MapRazorComponents<App>();

Este código configura los servicios necesarios y mapea los componentes Razor a la canalización HTTP de la aplicación, lo que permite la representación de páginas de manera eficiente y sin interactividad.

Implementación de un componente Razor con renderizado estático

A continuación, se presenta un ejemplo de cómo implementar un componente Razor utilizando SSR estático para representar una página del equipo de una empresa:

@page "/team"
@using BlazorSSR.Services
@inject IEmployeeService EmployeeService

<h1>Team</h1>
<p>Our team members make the magic happen.</p>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
    @foreach (var member in TeamMembers)
    {
        <div style="margin-bottom: 25px;">
            <h2>@member.Name</h2>
            <div>@member.Role</div>
            <div>@member.StartingDay.ToShortDateString()</div>
        </div>
    }
</div>

@code {
    public IEnumerable<Employee> TeamMembers { get; set; } = new List<Employee>();

    protected async override Task OnInitializedAsync()
    {
        TeamMembers = await EmployeeService.GetEmployees();
    }
}

Este componente utiliza el ciclo de vida de Blazor para cargar los datos de los empleados desde un servicio externo. Como se mencionó, este es un ejemplo de una página estática que no requiere interactividad en tiempo de ejecución.

Mejorando la experiencia con el renderizado de flujo

Aunque SSR estático es eficiente, puede haber una pequeña demora en la carga de datos del servidor. Para mejorar esta experiencia, Blazor introduce la representación de flujo. Con esta técnica, el servidor puede enviar una respuesta inicial tan pronto como llega la solicitud, mientras sigue enviando datos adicionales mientras se procesan en segundo plano.

Este enfoque resuelve el problema de la latencia inicial, mostrando rápidamente una versión básica de la página mientras los datos se cargan progresivamente. Al usar la directiva [StreamRendering] en los componentes Razor, puedes habilitar esta funcionalidad para crear aplicaciones que sean más rápidas y fluidas.

Casos de uso ideales para el SSR estático

El SSR estático es ideal para páginas con contenido estático que no requieren interactividad dinámica. Ejemplos típicos incluyen páginas informativas como las de «Acerca de», «Equipo» o «Historia de la empresa». Sin embargo, no es adecuado para páginas que dependen de la interacción del usuario, como formularios de contacto o páginas de inicio de sesión.

Blazor permite la combinación de diferentes modos de renderizado dentro de la misma aplicación, lo que significa que puedes usar SSR estático para algunas páginas y Blazor Server o Blazor WebAssembly para otras, según las necesidades específicas de cada página.

Conclusión

El renderizado estático del lado del servidor en Blazor, introducido con .NET 8, ofrece una solución poderosa para mejorar el rendimiento y la simplicidad de las aplicaciones web. Al eliminar la necesidad de interactividad en tiempo real y utilizar un modelo de solicitud/respuesta clásico, las aplicaciones pueden cargarse más rápido y ser más eficientes. Además, con la posibilidad de combinar SSR estático con otros modos de renderizado, los desarrolladores pueden crear aplicaciones altamente optimizadas y con una experiencia de usuario fluida.

Blazor continúa evolucionando, y el SSR estático representa un avance importante para aquellos que buscan aplicaciones rápidas, ligeras y fáciles de implementar.

Para más información o si quieres saber más sobre este tema, visita el artículo original en: