Lo nuevo en .NET Blazor este año y cómo aprovecharlo

En 2025, Blazor sigue consolidándose como el puente ideal entre desarrollo web con .NET, React y WordPress, ofreciendo una plataforma unificada para crear aplicaciones interactivas con C# en el frontend.

En este artículo te voy a mostrar lo nuevo en .NET Blazor este año y cómo aprovecharlo al máximo, con ejemplos de código, buenas prácticas y errores comunes que evitar.

¿Qué es .NET Blazor?

Blazor es un framework de Microsoft para construir aplicaciones web interactivas usando C# en lugar de JavaScript. Permite crear aplicaciones SPA (Single Page Applications) con la misma productividad que frameworks populares como React o Angular, pero completamente integradas al ecosistema .NET.

Existen dos modelos principales:

• Blazor Server: la aplicación se ejecuta en el servidor y usa SignalR para comunicarse con el cliente.
• Blazor WebAssembly (WASM): la aplicación se ejecuta directamente en el navegador, compilada a WebAssembly.

¿Por qué es importante en 2025?

En 2025, .NET Blazor se ha convertido en una pieza clave del ecosistema .NET 9, gracias a:

• Mejor integración con IA y servicios en la nube (Azure OpenAI, Cognitive Services).
• Soporte de renderizado híbrido con .NET MAUI para crear aplicaciones web, móviles y de escritorio desde una sola base de código.
• Interoperabilidad mejorada con React y librerías JavaScript, facilitando migraciones o proyectos mixtos.
• Optimización de rendimiento en Blazor WebAssembly, reduciendo tiempos de carga con Ahead-of-Time (AOT) compilation.
• Nuevos componentes preconstruidos en el paquete Microsoft.AspNetCore.Components.

Esto convierte a Blazor en una alternativa real a frameworks como React o Angular, pero con la ventaja de usar C# y .NET en todo el stack.

Paso a paso: Cómo crear una API REST en .NET 9 y consumirla con Blazor

Para mostrar lo nuevo en .NET Blazor este año, vamos a construir un ejemplo práctico:

1. Una API REST en .NET 9.
2. Un frontend en Blazor WebAssembly que la consuma.

1. Crear la API REST en .NET 9

dotnet new webapi -n BlazorApiDemo
cd BlazorApiDemo
dotnet run

Dentro del proyecto, añadimos un endpoint minimal API:

// Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Endpoint básico
app.MapGet("/api/products", () =>
{
    return new[]
    {
        new { Id = 1, Name = "Laptop", Price = 1200 },
        new { Id = 2, Name = "Mouse", Price = 25 }
    };
});

app.Run();

Este endpoint devuelve una lista de productos en JSON.

2. Crear el proyecto Blazor WebAssembly

dotnet new blazorwasm -n BlazorFrontend --use-local-db
cd BlazorFrontend
dotnet run

3. Consumir la API desde Blazor

En Pages/FetchData.razor:

@page "/products"
@inject HttpClient Http

<h3>Productos</h3>

@if (products == null)
{
    <p><em>Cargando...</em></p>
}
else
{
    <ul>
        @foreach (var product in products)
        {
            <li>@product.Name - $@product.Price</li>
        }
    </ul>
}

@code {
    private Product[]? products;

    protected override async Task OnInitializedAsync()
    {
        products = await Http.GetFromJsonAsync<Product[]>("/api/products");
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
    }
}

Con esto, el frontend Blazor consume la API REST creada en .NET 9.

Buenas prácticas con Blazor en 2025

1. Usar componentes reutilizables: evita repetir código en múltiples páginas.
2. Separar lógica en Code Behind: mantén la UI limpia y la lógica en .razor.cs.
3. Optimizar rendimiento con AOT: usa dotnet publish --blazorwasm-aot.
4. Integrar con Identity: asegura tus APIs con autenticación en Blazor + Identity.
5. Migrar librerías JS solo cuando sea necesario: aprovecha la interoperabilidad con React, pero prioriza C#.

Errores comunes y cómo evitarlos

❌ No configurar correctamente HttpClient.
👉 Usa builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });.

❌ Cargar demasiados datos en el primer render.
👉 Implementa paginación y carga diferida.

❌ Ignorar el ciclo de vida de los componentes.
👉 Usa OnInitializedAsync para carga inicial y Dispose para liberar recursos.

❌ Mezclar demasiada lógica en los .razor.
👉 Aplica separación en Code Behind (.razor.cs).

Preguntas frecuentes (FAQs)

1. ¿Blazor reemplazará a React o Angular?
No necesariamente, pero en entornos Microsoft es la mejor opción por integración con .NET y Azure.

2. ¿Cuál es la diferencia entre Blazor Server y WASM?
Server es ideal para apps internas con buena conexión; WASM para apps públicas sin dependencia de conexión constante.

3. ¿Qué hay de nuevo en Blazor este año?
Mejor integración con .NET MAUI, optimización de WebAssembly, soporte de AOT y más componentes listos para usar.

4. ¿Puedo usar Blazor con WordPress?
Sí, a través de APIs REST de WordPress, consumiéndolas desde Blazor como mostramos con .NET.

Recursos oficiales

• Documentación oficial de Blazor
• Novedades en .NET 9