.NET 9 Blazor: Pengembangan Full-Stack dengan Blazor United di 2026

Ekosistem .NET 9 menghadirkan evolusi signifikan dalam pengembangan aplikasi web full-stack melalui Blazor United. Arsitektur ini menyatukan tiga paradigma rendering yang sebelumnya terpisah—Static Server-Side Rendering (SSR), Interactive Server berbasis SignalR, dan WebAssembly—ke dalam satu model pemrograman yang kohesif. Hasilnya, developer dapat memilih strategi rendering yang paling tepat untuk setiap komponen dalam aplikasi tanpa perlu berpindah framework atau mengelola codebase terpisah.

Sebelum kehadiran Blazor United, pengembang harus memilih antara Blazor Server atau Blazor WebAssembly di awal proyek. Masing-masing memiliki kelebihan dan kekurangan yang sulit dikompromikan. Blazor Server menawarkan startup time yang cepat dan akses langsung ke resource backend, namun bergantung pada koneksi jaringan yang stabil. Blazor WebAssembly memberikan pengalaman offline-capable dengan latensi minimal, namun memerlukan waktu loading awal yang lebih lama karena harus mengunduh .NET runtime ke browser. Blazor United menghapus dilema tersebut dengan memungkinkan kedua model—ditambah Static SSR—berjalan berdampingan dalam satu aplikasi.

Menyiapkan Proyek Blazor Web App dengan .NET 9

Langkah pertama dalam membangun aplikasi Blazor United adalah membuat proyek menggunakan template blazorweb yang telah disediakan oleh .NET 9 SDK. Template ini secara otomatis mengkonfigurasi infrastruktur untuk mendukung semua render mode, termasuk routing, dependency injection, dan pengelolaan static assets.

# Create a new Blazor Web App with all render modes enabled
dotnet new blazorweb -n FullStackApp --interactivity Auto --all-interactive false
cd FullStackApp
dotnet run

Parameter --interactivity Auto mengaktifkan mode Auto yang secara cerdas memilih antara Server dan WebAssembly berdasarkan konteks runtime. Sementara itu, flag --all-interactive false menetapkan bahwa komponen bersifat static secara default—interaktivitas harus dideklarasikan secara eksplisit pada setiap komponen yang memerlukannya. Pendekatan opt-in ini menghasilkan aplikasi yang lebih performant karena menghindari overhead koneksi SignalR atau download WASM untuk konten yang tidak memerlukan interaktivitas.

Struktur proyek yang dihasilkan mencakup direktori Components dengan subdivisi untuk Pages, Layout, dan Shared. File Program.cs telah dikonfigurasi dengan service registration untuk dependency injection, middleware routing, dan konfigurasi static file serving. Developer dapat langsung mulai membuat komponen dengan memilih render mode yang sesuai untuk setiap use case spesifik.

Memahami Render Mode dalam Blazor United

Inti dari arsitektur Blazor United terletak pada sistem render mode yang fleksibel. Terdapat empat mode utama yang dapat dikombinasikan secara bebas dalam satu aplikasi, masing-masing dengan karakteristik performa dan kapabilitas yang berbeda.

| Render Mode | Hosting | Interactivity | Best For | |---|---|---|---| | Static SSR | Server | None | Marketing pages, docs, SEO content | | Interactive Server | Server via SignalR | Full | Dashboards, CRUD, forms | | Interactive WebAssembly | Browser via WASM | Full | Offline, heavy client-side logic | | Interactive Auto | Server then WASM | Full | Best of both — fast load + independence |

Static SSR merender komponen menjadi HTML murni di server tanpa mempertahankan koneksi persisten ke browser. Mode ini ideal untuk konten yang jarang berubah dan membutuhkan SEO optimal, seperti halaman marketing, dokumentasi, dan blog. Interactive Server memanfaatkan SignalR untuk membangun koneksi real-time bidireksional antara browser dan server, memungkinkan setiap interaksi pengguna diproses langsung di server dengan akses penuh ke database dan logic backend. Interactive WebAssembly mengeksekusi aplikasi sepenuhnya di browser menggunakan .NET runtime yang dikompilasi ke WASM, memberikan pengalaman offline-capable dengan latensi minimal setelah initial download selesai. Interactive Auto merupakan pendekatan hybrid—memulai dengan Server mode untuk initial render yang cepat, lalu secara transparan beralih ke WebAssembly setelah runtime di-download di background.

Setiap komponen mendeklarasikan render mode-nya menggunakan directive @rendermode. Berikut contoh komponen Dashboard yang menggunakan Interactive Server:

@page "/dashboard"
@rendermode InteractiveServer

<PageTitle>Dashboard</PageTitle>

<h1>Real-Time Metrics</h1>

<!-- This component renders interactively via SignalR -->
<MetricsChart />

<!-- Static content below renders as plain HTML -->
<footer>Updated every 5 seconds</footer>

Komponen Dashboard di atas menggunakan Interactive Server mode, yang berarti setiap interaksi pengguna—klik tombol, input teks, atau event lainnya—dikirim ke server melalui SignalR, diproses di sisi server, dan UI update dikirim kembali ke browser. Perhatikan bahwa MetricsChart sebagai child component secara otomatis mewarisi render mode dari parent-nya. Elemen <footer> tetap dirender sebagai HTML statis meskipun berada dalam komponen interaktif, karena tidak memiliki event handler.

Fleksibilitas granular ini memungkinkan optimasi yang sangat spesifik—halaman katalog produk dapat menggunakan Static SSR untuk performa SEO, sementara shopping cart pada halaman yang sama menggunakan Interactive Server untuk real-time price updates.

Adaptive Components: Deteksi Konteks Rendering

Blazor United menyediakan mekanisme untuk mendeteksi apakah komponen sedang berjalan dalam mode interaktif atau static melalui RendererInfo.IsInteractive. Fitur ini memungkinkan implementasi progressive enhancement—komponen menyediakan pengalaman penuh saat interaktivitas tersedia, dan gracefully degrade ke static HTML ketika tidak.

@if (RendererInfo.IsInteractive)
{
    <button @onclick="HandleClick">Interactive Action</button>
}
else
{
    <a href="/fallback">Static Fallback Link</a>
}

@code {
    private void HandleClick()
    {
        // Runs only in interactive modes (Server or WASM)
    }
}

Dalam contoh di atas, ketika komponen dirender dalam mode interaktif (baik Server maupun WASM), tombol dengan event handler @onclick ditampilkan. Namun ketika dirender sebagai static HTML, link tradisional <a> digunakan sebagai fallback. Pola ini memastikan aplikasi tetap fungsional meskipun JavaScript disabled atau browser tidak mendukung WebAssembly.

Adaptive components sangat berguna untuk komponen yang digunakan kembali di berbagai konteks—misalnya, navigation menu yang tampil sebagai interactive dropdown dengan animasi di halaman dashboard, namun menjadi static links di halaman marketing. Pendekatan ini menghindari duplikasi kode sambil memaksimalkan performa di setiap konteks rendering.

Streaming Rendering untuk Halaman dengan Data Asinkron

Streaming rendering merupakan teknik yang memungkinkan Blazor mengirimkan HTML ke browser secara inkremental sebelum seluruh proses pemuatan data selesai. Dengan attribute [StreamRendering], komponen merender placeholder terlebih dahulu, kemudian streaming konten final setelah operasi asinkron selesai—menghasilkan perceived load time yang jauh lebih cepat.

@page "/products"
@attribute [StreamRendering]

<PageTitle>Product Catalog</PageTitle>

@if (products is null)
{
    <p>Loading products...</p>
}
else
{
    <div class="product-grid">
        @foreach (var product in products)
        {
            <ProductCard Item="@product" />
        }
    </div>
}

@code {
    private List<Product>? products;

    // Data loads asynchronously; streaming pushes updates to the browser
    protected override async Task OnInitializedAsync()
    {
        products = await ProductService.GetAllAsync();
    }
}

Pada request awal, browser segera menerima HTML yang berisi teks "Loading products..." sebagai placeholder. Server kemudian melanjutkan eksekusi OnInitializedAsync(), dan ketika ProductService.GetAllAsync() mengembalikan data, server melakukan streaming HTML pengganti yang berisi product grid ke browser. Penggantian konten terjadi secara otomatis tanpa full page reload.

Teknik ini sangat efektif untuk halaman dengan data-fetching yang membutuhkan waktu lama—misalnya, dashboard yang menampilkan beberapa chart yang masing-masing memerlukan query database kompleks. Pengguna melihat struktur halaman dan chart yang sudah selesai dimuat terlebih dahulu, sementara chart lain masih dalam proses loading. Pengalaman ini jauh lebih baik dibandingkan menunggu seluruh data siap sebelum menampilkan konten apapun.

Streaming rendering bekerja optimal pada Static SSR dan Interactive Server mode. Untuk WebAssembly, karena rendering terjadi sepenuhnya di sisi client, streaming tidak memberikan manfaat yang sama—namun pengurangan initial payload tetap membantu performa startup.

Constructor Injection pada Komponen Blazor

.NET 9 Blazor mendukung dependency injection melalui property injection dengan attribute [Inject] dan modifier required. Pendekatan ini memastikan bahwa setiap dependency yang dibutuhkan oleh komponen tersedia saat runtime, dan compiler memberikan peringatan jika ada dependency yang tidak terdaftar di service container.

@page "/orders"
@rendermode InteractiveServer

<h2>Order History</h2>

@if (orders is not null)
{
    <table>
        <thead>
            <tr><th>Order ID</th><th>Date</th><th>Total</th></tr>
        </thead>
        <tbody>
            @foreach (var order in orders)
            {
                <tr>
                    <td>@order.Id</td>
                    <td>@order.PlacedAt.ToShortDateString()</td>
                    <td>@order.Total.ToString("C")</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    // Constructor injection via primary constructor
    [Inject] public required IOrderService OrderService { get; set; }
    [Inject] public required NavigationManager Nav { get; set; }

    private List<Order>? orders;

    protected override async Task OnInitializedAsync()
    {
        orders = await OrderService.GetRecentOrdersAsync();
    }
}

Pada contoh di atas, IOrderService dan NavigationManager dideklarasikan sebagai properties dengan attribute [Inject] dan modifier required. Modifier required memastikan bahwa framework Blazor harus menyediakan instance untuk kedua dependency tersebut sebelum komponen dapat digunakan. Jika salah satu service tidak terdaftar di DI container, aplikasi akan menghasilkan error yang jelas pada saat startup.

Registrasi service dilakukan di Program.cs menggunakan ASP.NET Core dependency injection container standar. Untuk Interactive Server, service yang bersifat scoped mempertahankan instance per koneksi SignalR. Untuk WebAssembly, semua service bersifat scoped per sesi pengguna karena setiap pengguna memiliki runtime WASM independen.

Blazor United juga mendukung cascading parameters untuk meneruskan data dari komponen parent ke child tanpa explicit prop drilling—sangat berguna untuk state global seperti authentication context atau pengaturan tema yang dibutuhkan oleh banyak komponen dalam hierarki yang dalam.

Interactive Auto Mode: Menggabungkan Kecepatan dan Kemandirian

Interactive Auto merupakan render mode paling canggih dalam Blazor United. Mode ini secara transparan menggabungkan kecepatan respons Interactive Server dengan kemandirian penuh WebAssembly. Alur kerjanya sebagai berikut: ketika pengguna pertama kali mengakses komponen, rendering dilakukan melalui Interactive Server mode via SignalR, memberikan interaktivitas instan tanpa perlu menunggu download WASM runtime. Secara bersamaan di background, browser mengunduh .NET WebAssembly runtime beserta application DLLs. Setelah download selesai dan runtime ter-cache, koneksi SignalR ditutup dan komponen secara otomatis beralih ke mode WebAssembly—berjalan sepenuhnya di sisi client.

@page "/chat"
@rendermode InteractiveAuto

<h2>Live Chat</h2>

<div class="chat-messages">
    @foreach (var msg in messages)
    {
        <div class="message">@msg.Author: @msg.Text</div>
    }
</div>

<input @bind="newMessage" @onkeydown="HandleKey" placeholder="Type a message..." />

@code {
    [Inject] public required IChatService ChatService { get; set; }

    private List<ChatMessage> messages = new();
    private string newMessage = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        messages = await ChatService.GetRecentMessagesAsync();
    }

    private async Task HandleKey(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(newMessage))
        {
            await ChatService.SendAsync(newMessage);
            newMessage = string.Empty;
        }
    }
}

Komponen Chat di atas mendeklarasikan @rendermode InteractiveAuto. Pada kunjungan pertama, setiap keystroke dan aksi pengiriman pesan diproses melalui SignalR di server. Namun setelah transisi ke WASM selesai, semua interaksi UI diproses sepenuhnya di browser tanpa network roundtrip (kecuali untuk pengiriman pesan chat yang tetap memerlukan komunikasi ke backend via HTTP API).

Transisi dari Server ke WASM mode sepenuhnya transparan bagi pengguna—state komponen dipertahankan, tidak ada flicker atau reload halaman. Developer tidak perlu menulis conditional logic untuk menangani perbedaan antara kedua mode; Blazor runtime mengelola seluruh kompleksitas di belakang layar.

Interactive Auto sangat ideal untuk aplikasi yang membutuhkan interaktivitas kompleks namun ingin menghindari delay loading awal yang signifikan. Pengguna mendapatkan respons instan saat pertama kali membuka halaman, dan secara bertahap memperoleh kapabilitas penuh saat WASM runtime selesai dimuat. Untuk kunjungan berikutnya, jika WASM runtime sudah ter-cache oleh browser, aplikasi langsung berjalan dalam mode WebAssembly tanpa melalui fase Server perantara.

Reconnection dan Resilience pada Interactive Server

Dalam Interactive Server mode, stabilitas koneksi SignalR sangat krusial bagi pengalaman pengguna. Gangguan jaringan, restart server, atau mode sleep pada browser dapat memutus koneksi. Blazor menyediakan mekanisme reconnection otomatis dengan strategi exponential backoff yang dapat dikustomisasi sesuai kebutuhan aplikasi.

Blazor.start({
    circuit: {
        reconnectionOptions: {
            retryIntervalMilliseconds: (retryNumber) => {
                // Exponential backoff: 200ms, 400ms, 800ms, max 30s
                return Math.min(200 * Math.pow(2, retryNumber), 30000);
            },
            maxRetries: 15
        }
    }
});

Konfigurasi di atas menerapkan strategi exponential backoff yang dimulai dari interval 200ms dan menggandakan setiap percobaan hingga maksimal 30 detik. Setelah 15 percobaan gagal, Blazor menampilkan UI error yang menginformasikan pengguna bahwa koneksi terputus.

Developer juga dapat menangani reconnection events untuk menampilkan custom UI—misalnya, banner notifikasi yang muncul saat koneksi terputus dan menghilang saat koneksi pulih kembali. Blazor menyediakan event hooks seperti onConnectionDown dan onConnectionUp yang dapat digunakan untuk memicu state updates atau pelacakan analytics.

Untuk aplikasi yang bersifat mission-critical, kombinasi Interactive Auto dengan offline persistence menggunakan IndexedDB atau localStorage memberikan tingkat resilience tertinggi. Saat koneksi terputus, aplikasi tetap fungsional dalam mode WASM, dan perubahan data dapat di-queue untuk disinkronisasi ketika koneksi kembali tersedia.

Static SSR dengan Selective Interactivity

Tidak semua halaman dalam aplikasi web memerlukan interaktivitas. Halaman kebijakan privasi, syarat layanan, atau dokumentasi teknis seringkali lebih optimal disajikan sebagai HTML statis demi performa dan SEO. Blazor United memungkinkan developer untuk secara eksplisit memilih keluar dari interaktivitas menggunakan attribute [ExcludeFromInteractiveRouting].

@page "/privacy"
@attribute [ExcludeFromInteractiveRouting]

<PageTitle>Privacy Policy</PageTitle>

<!-- This page always renders as static HTML -->
<!-- Even if global interactivity is enabled -->
<article>
    <h1>Privacy Policy</h1>
    <p>Last updated: April 2026</p>
    <!-- Content -->
</article>

Dengan menambahkan [ExcludeFromInteractiveRouting], halaman Privacy akan selalu dirender sebagai HTML statis, meskipun root layout atau komponen parent menggunakan interactive render mode. Hal ini menghindari overhead koneksi SignalR atau download WASM untuk konten yang bersifat murni informatif.

Pola ini sangat berguna untuk aplikasi yang sebagian besar bersifat interaktif namun memiliki beberapa halaman statis. Alih-alih membuat static site terpisah, developer dapat memelihara semua konten dalam satu aplikasi Blazor dan mengontrol strategi rendering secara granular per halaman atau per komponen.

Static SSR juga mendukung pengiriman form melalui HTML form standar tanpa JavaScript. Blazor dapat memproses form submission di server dan mengembalikan HTML yang sudah di-update, menyediakan fungsionalitas penuh bahkan ketika JavaScript dinonaktifkan. Kombinasi Static SSR dengan selective interactivity merupakan solusi optimal untuk banyak aplikasi web—halaman marketing, blog, dan dokumentasi mendapat keuntungan dari rendering statis yang cepat dan ramah SEO, sementara dashboard, admin panel, dan fitur interaktif menggunakan Server atau WASM mode.

Performa dengan AOT Compilation

.NET 9 Blazor WebAssembly mendukung Ahead-of-Time (AOT) compilation, yang mengkompilasi kode IL menjadi native WebAssembly sebelum deployment. Hasilnya adalah startup time dan runtime performance yang signifikan lebih cepat dibandingkan interpretasi JIT (Just-In-Time). AOT compilation sangat direkomendasikan untuk deployment production yang mengutamakan performa.

# Publish with AOT for production
dotnet publish -c Release -p:RunAOTCompilation=true

Perintah di atas mengkompilasi seluruh .NET DLLs menjadi native WASM. Output yang dihasilkan memiliki ukuran payload yang lebih besar, namun kecepatan eksekusi mendekati native code. Proses kompilasi memerlukan waktu dan resources yang lebih banyak, namun trade-off ini sepadan untuk aplikasi production yang melayani pengguna dalam skala besar.

AOT compilation memberikan peningkatan paling signifikan pada operasi yang bersifat compute-intensive—seperti image processing, data parsing, atau kalkulasi kompleks yang sebelumnya lambat pada interpreted WASM. .NET 9 juga memperkenalkan trimming yang lebih agresif, yang secara otomatis menghapus kode yang tidak digunakan dari bundle akhir. Kombinasi AOT dengan trimming dapat menghasilkan aplikasi yang jauh lebih kecil dan cepat dibandingkan Blazor pada versi-versi sebelumnya.

Kesimpulan

.NET 9 Blazor United merepresentasikan kematangan platform Blazor sebagai solusi pengembangan web full-stack yang komprehensif. Arsitektur yang menyatukan Static SSR, Interactive Server, dan WebAssembly dalam satu framework kohesif memberikan fleksibilitas untuk memilih strategi rendering optimal sesuai kebutuhan spesifik setiap komponen—tanpa perlu mengelola multiple teknologi atau codebase terpisah.

Berikut ringkasan poin-poin utama yang telah dibahas:

• Static SSR optimal untuk konten yang memerlukan SEO tinggi dan jarang berubah, seperti halaman marketing dan dokumentasi
• Interactive Server ideal untuk aplikasi yang membutuhkan akses langsung ke backend dan database melalui SignalR
• Interactive WebAssembly memberikan pengalaman offline-capable dengan latensi minimal setelah initial download
• Interactive Auto menggabungkan kecepatan Server dengan kemandirian WASM secara transparan
• Streaming rendering mempercepat perceived load time untuk halaman dengan operasi data asinkron yang berat
• AOT compilation meningkatkan performa runtime WASM secara signifikan untuk deployment production
• Adaptive components memungkinkan progressive enhancement dan graceful degradation lintas render mode
• Reconnection strategy yang tepat sangat krusial untuk menjaga pengalaman pengguna pada Interactive Server mode

Dengan memahami kapan dan bagaimana menggunakan setiap render mode, developer dapat membangun aplikasi web yang tidak hanya performant dan scalable, tetapi juga memberikan pengalaman pengguna yang optimal di berbagai kondisi jaringan dan perangkat.