> ## Content Index
> Fetch the complete content index at: https://www.azurebrasil.cloud/llms.txt
> Use this file to discover other available public pages before exploring further.

# Blazor WebAssembly: O Básico para Começar
- URL: https://www.azurebrasil.cloud/blog/blazor-webassembly-o-basico-para-comecar/
- Published: 2026-02-10T12:26:04.000Z
- Updated: 2026-02-10T12:26:03.000Z
- Author: Felipe Klafke

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.).

| Característica            | Descrição                                                                                          |
| ------------------------- | -------------------------------------------------------------------------------------------------- |
| **Client‑Side**           | Todo o código .NET (C#, Razor, JavaScript interop) roda no navegador.                              |
| **WebAssembly**           | O runtime .NET compila para WASM, permitindo executar C# nativamente no browser.                   |
| **Zero Reload**           | Navegação entre páginas ocorre sem recarregamento completo do DOM – SPA (Single‑Page Application). |
| **Integração JavaScript** | Quando necessário, é possível chamar APIs JS via IJSRuntime.                                       |

### 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`

```csharp
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`

```html
<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`

```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`

```csharp
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:

```razor
@inject WeatherForecastService ForecastService

...

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

## 5\. Chamando JavaScript (Interop)

Suponha que você queira exibir uma mensagem usando `alert`.

### C#

```csharp
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

```csharp
builder.Services.AddScoped<JsInterop>();
```

### Usando no componente

```csharp
@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.).

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

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

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

## 7\. Pacotes Úteis

| Pacote                                                    | Descrição                                     |
| --------------------------------------------------------- | --------------------------------------------- |
| **Microsoft.AspNetCore.Components.WebAssembly.DevServer** | Suporte ao hot‑reload e dev server.           |
| **Blazored.LocalStorage**                                 | Wrapper para localStorage via JS interop.     |
| **MudBlazor** ou **Radzen.Blazor**                        | Componentes UI prontos (botões, grids, etc.). |

## 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.