Blazor é a tecnologia da Microsoft que permite escrever aplicações web interativas usando C#, Razor e .NET em vez de JavaScript. Dentro desse ecossistema, Blazor WebAssembly (WASM) destaca‑se por rodar completamente no navegador – o código .NET compila para WebAssembly e é executado client‑side.

Este artigo apresenta os conceitos fundamentais, a arquitetura, como criar um projeto básico e dicas práticas para quem está iniciando com Blazor WASM.

1. O que é Blazor WebAssembly?

Blazor WebAssembly (WASM) é uma tecnologia da Microsoft que permite rodar código .NET no navegador, compilando-o para WebAssembly – um formato binário executável pelo browser com desempenho próximo ao nativo.

Como funciona?

1. Runtime .NET no Browser
   O runtime do .NET (CoreCLR) é compilado para WebAssembly e carregado junto com a aplicação. Assim, o código C#, Razor e bibliotecas NuGet são executados diretamente na máquina cliente, sem precisar de um servidor .NET.
2. Single‑Page Application (SPA)
   Como no Angular ou React, Blazor WASM oferece navegação entre páginas sem recarregar a página inteira; apenas componentes são renderizados dinamicamente pelo motor Razor.
3. Interoperabilidade JavaScript
   Quando o código C# precisa acessar APIs do navegador que ainda não têm suporte direto (Clipboard, IndexedDB, WebRTC, etc.), ele pode chamar funções JavaScript através da interface IJSRuntime.
4. Deployment
   A aplicação final é um conjunto de arquivos estáticos (wwwroot) – HTML, CSS, JS e o bundle WASM contendo o runtime + seu código .NET. Pode ser hospedada em qualquer servidor que sirva conteúdo estático (GitHub Pages, Azure Static Web Apps, Netlify, etc.).

Por que usar Blazor WASM?

• Unificação de stack: Desenvolvedores .NET escrevem tanto front‑end quanto back‑end na mesma linguagem.
• Reutilização de código: Bibliotecas, modelos e lógica podem ser compartilhados entre cliente e servidor.
• Desenvolvimento offline: O aplicativo pode funcionar em modo “offline” depois de carregado.

2. Arquitetura do Projeto

Um projeto Blazor WASM típico contém:

/YourApp
├─ /wwwroot # Assets estáticos (css, js, imagens)
├─ /Pages # Componentes Razor que representam rotas
├─ /Shared # Layouts e componentes reutilizáveis
├─ /Services # Serviços de acesso a dados ou lógica de negócio
├─ Program.cs # Configuração da aplicação
└─ App.razor # Router principal

Program.cs

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
// Serviços de exemplo
builder.Services.AddSingleton();
await builder.Build().RunAsync();

• WebAssemblyHostBuilder: Configura o host e registra componentes.
• Serviços: Registrados via DI (Dependency Injection) para serem injetados em componentes.

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Desculpe, a página não foi encontrada.</p>
    </NotFound>
</Router>

O <Router> mapeia URLs para componentes que possuem atributo [Route].

3. Primeiro Componente: Index.razor

@page "/"

<h1>Bem-vindo ao Blazor WASM!</h1>

<p>Data atual: @DateTime.Now.ToString("F")</p>

• @page "/": Define a rota.
• O Razor permite misturar HTML e C# diretamente.

4. Serviços de Dados

Exemplo: WeatherForecastService.cs

public class WeatherForecastService
{
    private readonly HttpClient _http;

    public WeatherForecastService(HttpClient http)
    {
        _http = http;
    }

    public async Task<List<WeatherForecast>> GetForecastAsync(DateTime startDate)
    {
        return await _http.GetFromJsonAsync<List<WeatherForecast>>
            ($"sample-data/weather.json?start={startDate:yyyy-MM-dd}");
    }
}

• HttpClient já está registrado por padrão em Blazor WASM.
• O serviço pode ser injetado:

@inject WeatherForecastService ForecastService

...

var forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

5. Chamando JavaScript (Interop)

Suponha que você queira exibir uma mensagem usando alert.

C#

using Microsoft.JSInterop;

public class JsInterop
{
    private readonly IJSRuntime _js;

    public JsInterop(IJSRuntime js) => _js = js;

    public ValueTask ShowAlert(string message)
        => _js.InvokeVoidAsync("alert", message);
}

Registrando

builder.Services.AddScoped<JsInterop>();

Usando no componente

@inject JsInterop Js

<button @onclick="ShowMessage">Mostrar alerta</button>

@code {
    private async Task ShowMessage()
        => await Js.ShowAlert("Olá do Blazor!");
}

6. Layouts e Navegação

O layout padrão (MainLayout.razor) contém a estrutura comum da aplicação (header, sidebar, etc.).

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    @Body
</div>

• @Body é onde o conteúdo das páginas rotas será renderizado.

7. Pacotes Úteis

8. Build e Deploy

dotnet publish -c Release

O output gera um diretório bin/Release/net7.0/publish/wwwroot que pode ser hospedado em qualquer servidor estático (GitHub Pages, Azure Static Web Apps, Netlify, etc.).

9. Dicas de Boas Práticas

1. Lazy Load: Carregue componentes sob demanda para reduzir o tamanho inicial do bundle.
2. Cache: Utilize localStorage ou IndexedDB para armazenar dados que não precisam ser buscados sempre.
3. Segurança: Nunca armazene tokens sensíveis em JavaScript; use cookies com flag HttpOnly se possível.
4. Performance: Evite loops pesados no UI thread; use Task.Run ou Web Workers quando necessário.

Conclusão: Quando usar Blazor WASM?

• Aplicações ricas e interativas onde a experiência offline é importante (apps de produtividade, dashboards).
• Projetos que já utilizam .NET no backend e desejam manter consistência na stack.
• Situações onde se quer evitar dependências de JavaScript complexas ou quando o time tem mais expertise em C#.

Em resumo, Blazor WebAssembly traz a potência do .NET para o cliente web, permitindo construir SPAs modernas com uma única linguagem e ecosistema.