Blazor w 2025: Server, WASM, Auto i Hybrid - który tryb wybrać?

Blazor - co to właściwie jest?

Blazor to framework od Microsoftu pozwalający pisać interaktywne aplikacje webowe w C# zamiast JavaScript. Ale to tylko początek - Blazor ewoluował z eksperymentu w pełnoprawny ekosystem obejmujący web, desktop i mobile.

Tryby renderowania - przegląd

┌─────────────────────────────────────────────────────────────┐
│                        BLAZOR                               │
├─────────────┬─────────────┬─────────────┬──────────────────┤
│   Server    │    WASM     │    Auto     │  Hybrid (MAUI)   │
├─────────────┼─────────────┼─────────────┼──────────────────┤
│ Logika na   │ Logika w    │ Server →    │ Natywna appka    │
│ serwerze    │ przeglądarce│ WASM        │ desktop/mobile   │
│ SignalR     │ No server   │ Best of     │ WebView lub      │
│ connection  │ needed      │ both        │ native rendering │
└─────────────┴─────────────┴─────────────┴──────────────────┘

1. Blazor Server

Jak działa: Cały kod C# wykonuje się na serwerze. Przeglądarka to tylko "terminal" - wysyła eventy (kliknięcia, input) przez SignalR, serwer przetwarza i odsyła diff DOM-u.

// Komponent - wykonuje się NA SERWERZE
@code {
    private async Task LoadData()
    {
        // Bezpośredni dostęp do bazy - bez API!
        users = await _dbContext.Users.ToListAsync();
    }
}

Zalety Server

Wady Server

Kiedy Server?

• Aplikacje wewnętrzne (CRM, ERP, admin panele)
• Real-time dashboardy
• Prototypy i MVP
• Aplikacje z wrażliwą logiką (finanse, medycyna)

2. Blazor WebAssembly (WASM)

Jak działa: Cały runtime .NET kompiluje się do WebAssembly i wykonuje w przeglądarce. Serwer wysyła tylko statyczne pliki.

// Ten sam komponent - ale wykonuje się W PRZEGLĄDARCE
@code {
    private async Task LoadData()
    {
        // Musi iść przez HTTP API
        users = await Http.GetFromJsonAsync<List<User>>("/api/users");
    }
}

Zalety WASM

Wady WASM

Kiedy WASM?

• Aplikacje offline-first
• PWA (Progressive Web Apps)
• Publiczne aplikacje z dużym ruchem
• Gry przeglądarkowe
• Narzędzia działające lokalnie

3. Blazor Auto (Interactive Auto) - .NET 8+

Jak działa: Najlepsze z obu światów. Pierwsze załadowanie = Server (szybki start), w tle pobiera się WASM. Kolejne wizyty = pełne WASM.

// Program.cs - .NET 8+
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

// Komponent
@rendermode InteractiveAuto  // Magiczna linia

Flow użytkownika

Pierwsza wizyta:
┌──────────┐    ┌──────────┐    ┌──────────┐
│ Request  │───▶│  Server  │───▶│   HTML   │ ← Instant!
└──────────┘    │  Render  │    └──────────┘
                └────┬─────┘
                     │ Background download WASM
                     ▼
              ┌──────────────┐
              │ Cache WASM   │
              └──────────────┘

Kolejne wizyty:
┌──────────┐    ┌──────────┐    ┌──────────┐
│ Request  │───▶│   WASM   │───▶│  Render  │ ← No server!
└──────────┘    │  (cached)│    └──────────┘

Zalety Auto

Wady Auto

Kiedy Auto?

• Publiczne aplikacje wymagające SEO + interaktywności
• E-commerce (szybki start, potem SPA-like)
• Portale contentowe z interaktywnymi elementami

4. Blazor Hybrid (MAUI)

Jak działa: Komponenty Blazor renderowane w natywnej aplikacji desktop/mobile przez WebView lub native controls.

<!-- MainPage.xaml -->
<BlazorWebView HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

// Ten sam komponent Blazor - działa w MAUI!
@code {
    [Inject] private IFileSystem FileSystem { get; set; }
    
    private async Task SaveLocally()
    {
        // Dostęp do natywnego file system!
        await FileSystem.WriteTextAsync(path, content);
    }
}

Platformy Hybrid

Współdzielenie kodu

┌─────────────────────────────────────────┐
│           Shared Project                │
│  ┌─────────────────────────────────┐   │
│  │   Components/                    │   │
│  │   ├── UserProfile.razor         │   │  ← Ten sam kod!
│  │   ├── Dashboard.razor           │   │
│  │   └── Settings.razor            │   │
│  │   Services/                      │   │
│  │   └── ApiService.cs             │   │
│  └─────────────────────────────────┘   │
└────────────────┬────────────────────────┘
                 │
    ┌────────────┼────────────┐
    ▼            ▼            ▼
┌────────┐  ┌────────┐  ┌────────┐
│  Web   │  │ Mobile │  │Desktop │
│(Server)│  │ (MAUI) │  │ (MAUI) │
└────────┘  └────────┘  └────────┘

Realistycznie: 70-90% kodu można współdzielić między web a mobile/desktop.

Zalety Hybrid

Wady Hybrid

Kiedy Hybrid?

• Aplikacje wewnętrzne na wszystkie platformy
• Migracja z Xamarin
• Startups - jeden zespół, wszystkie platformy
• Companion apps do istniejącej web app

Porównanie wydajności

*Auto: po pierwszym załadowaniu WASM

Kiedy Blazor NIE jest dobrym wyborem?

1. Aplikacje wymagające minimalnego bundle size

React (minified): ~40KB
Vue (minified): ~30KB
Blazor WASM: ~2-5MB (z runtime)

Dla landing pages, prostych stron - overkill.

2. Zespół bez doświadczenia .NET

Krzywa uczenia C# + Blazor + .NET ecosystem jest realna. Jeśli zespół zna React - zostańcie przy React.

3. Real-time games wymagające 60fps

WebGL/Canvas + JavaScript będzie wydajniejszy. Blazor dodaje overhead.

4. Aplikacje wymagające maksymalnej kompatybilności

Stare przeglądarki nie obsługują WASM. Server wymaga stałego połączenia.

5. Mikro-frontendy

Blazor nie ma dobrego story dla micro-frontends (jeszcze).

Podsumowanie - macierz decyzyjna

Moja rekomendacja

Dla większości aplikacji biznesowych w 2024:

1. Start z Blazor Server - szybki development, łatwy debugging
2. Dodaj Auto gdy potrzebujesz offline/PWA
3. Rozważ Hybrid gdy klienci chcą mobile app

Blazor to nie silver bullet, ale dla zespołów .NET to najefektywniejsza droga do full-stack web development bez uczenia się nowego ekosystemu.

Ten artykuł bazuje na doświadczeniu z produkcyjnymi aplikacjami Blazor Server. Sprawdź case study DevFolio po praktyczne przykłady.