Blazor adalah framework antarmuka pengembangan web dari Microsoft yang memungkinkan pengembang membangun aplikasi web interaktif menggunakan C# dan teknologi .NET alih-alih menggunakan JavaScript di sisi klien. Dengan Blazor, Pengembang aplikasi dapat menulis kode untuk client-side logic dan komponen UI dengan C#, yang dikompilasi ke dalam assembly .NET standar. Assembly ini dapat berjalan di browser berkat adanya format WebAssembly (Blazor WebAssembly/WASM), atau dijalankan di sisi server dengan pembaruan UI dikirimkan melalui SignalR (Blazor Server).

Apa Itu Web Assembly?

WebAssembly (WASM) adalah format instruksi biner tingkat rendah (low level instruction) untuk virtual machine di browser yang dirancang sebagai target kompilasi untuk bahasa tingkat tinggi seperti C/C++, Rust, dan C#. Pengembang dapat menulis kode menggunakan bahasa pemrograman C++/ RUST/ C# lalu mengkompilasinya menjadi WASM. Singkatnya, WASM adalah bahasa binary yang dapat dijalankan oleh browser web modern di samping JavaScript. Tujuannya adalah untuk memungkinkan kode yang ditulis dalam berbagai bahasa non-web untuk dieksekusi di browser dengan kinerja mendekati kecepatan native.

WASM adalah format binary yang dapat dieksekusi dan berjalan di browser seperti layaknya file javascript. WASM memungkinkan pengembang untuk memanfaatkan basis kode dan pustaka yang sudah ada, yang ditulis dalam bahasa lain, dan menjalankannya di web. Namun seperti JavaScript, WASM beroperasi di lingkungan sandbox yang terisolasi di dalam browser. Ini berarti kode WASM tidak memiliki akses langsung ke sistem operasi host (seperti file system), menjadikannya aman untuk dieksekusi di perangkat pengguna.

WASM dan Javascript tidak saling menggantikan, namun menjadi saling melengkapi. WASM dapat digunakan pada penerapan aplikasi yang menggunakan CPU Intensif. Kedua teknologi ini dapat saling berkomunikasi melalui mekanisme yang disebut JavaScript Interop, memungkinkan modul WASM memanggil fungsi JavaScript, dan sebaliknya, untuk memanipulasi halaman atau mengakses API standar web.

Bagaimana Cara Kerja BLAZOR?

Blazor memungkinkan pengembang .NET atau C# mampu mengembangkan aplikasi secara full-stack baik di sisi UI/frontend maupun backend hanya dengan 1 bahasa pemrograman C#. Blazor adalah bagian dari ekosistem ASP.NET Core. Tujuannya adalah untuk menghadirkan pengembangan full-stack .NET—dari server ke browser—dengan satu bahasa C# (tidak perlu bergantung menuliskan kode menggunakan javascript browser).

Blazor tidak terikat pada satu cara eksekusi; ia menawarkan fleksibilitas melalui dua model hosting utama. Dari sini, blazor bisa dibedakan ke dalam dua model pengembangan dibedakan bagaimana kode blazor tersebut dihosting dan bekerja: Client side Blazor dan Server side Blazor.

Perbandingan	Blazor Server Side	Blazor Client Side
Lokasi Eksekusi Kode C#	Server	Di browser dalam bentuk web assembly. Berjalan dalam sandbox webassembly browser.
Konektivitas	Mengharuskan adanya koneksi berkelanjutan ke server (Stateful). Jika koneksi terputus, aplikasi berhenti berfungsi.	Tidak mengharuskan koneksi berkelanjutan, memungkinkan aplikasi dapat berjalan secara offline setelah diunduh.
Interactivity dan Komunikasi ke Server	Menggunakan koneksi SignalR (WebSocket) antara browser dan server. Perubahan UI dikirim melalui koneksi SignalR tersebut.	Eksekusi kode berjalan langsung di browser. Interaksi lokal (event handler dan perubahan UI) ditangani sepenuhnya di browser.
Ukuran Unduhan Aplikasi	Relatif kecil, karena hanya kode HTML, CSS, dan file JavaScript Blazor yang diunduh	Relatif Lebih besar dan lebih banyak file. Hal ini karena perlu mengunduh runtime .NET dan assembly aplikasi (dalam format webassembly) ke browser.
Kinerja Runtime	Kinerja relatif lebih cepat, karena kode C# berjalan di sisi CPU server yang kuat. Kinerja sangat dipengaruhi faktor utama Latensi jaringan.	Kinerja blazor app hampir native di browser, tetapi mungkin lebih lambat dari Server-Side untuk beberapa operasi yang mengandalkan CPU client.
Akses ke Javascript	Dapat mengakses eksekusi javascript melalui javascript interopt	Dapat mengakses eksekusi javascript melalui javascript interopt
Cara Kerja	Ketika pengguna berinteraksi (misalnya mengklik tombol), event tersebut dikirim ke server melalui SignalR. Kode C# di server menjalankan logika, menghitung perbedaan dalam DOM, dan mengirimkan pembaruan UI minimal kembali ke browser melalui koneksi SignalR.	Seluruh aplikasi, termasuk runtime .NET, diunduh ke browser. Kode C# berjalan dalam sandbox keamanan browser, layaknya JavaScript. Ketika pengguna berinteraksi (misalnya mengklik tombol), eksekusi berjalan langsung di runtime javascript browser.
Akses ke .NET Library	Akses penuh ke Library .NET dan tidak terbatas	Akses terbatas, tidak semua library kompatibel di sisi client, terutama akses ke file sistem dan akses ke registry tidak dapat dilakukan, akses IO harus melalui API Browser.

Variasi Pendekatan dari Penerapan Project Blazor

Meskipun blazor bisa dikombinasikan dengan berbagai project (seperti menggunakan WebView control maupun digabungkan dengan .NET MAUI) , namun secara konsep bagaimana kode blazor dihosting dan dieksekusi tetap dapat dibedakan menjadi server side dan client side.

Saat ini sudah tersedia berbagai variasi model project blazor yang menggabungkan kelebihan native desktop maupun rendering aplikasi.

1. Blazor Hybrid

Blazor Hybrid adalah pendekatan untuk membangun aplikasi native (desktop dan seluler) menggunakan komponen UI Razor Blazor dan runtime .NET yang berjalan secara lokal pada perangkat desktop maupun selular. Pendekatan ini memungkinkan pengembang .NET untuk menggunakan skill pemrograman C# yang dimiliki serta komponen Blazor yang sama yang mereka gunakan untuk pembuatan aplikasi web, namun dapat menargetkan hasilnya ke dalam platform native seperti Windows, macOS, Android, dan iOS.

Bagaimana Blazor Hybrid bekerja? Blazor hybrid bekerja dengan menggabungkan kode blazor dengan framework UI Native (seperti WPF, WinForm, atau .NET MAUI). Karakteristik dari cara kerja Blazor Hybrid adalah sebagai berikut

• Native execution dari Razor Component, kode blazor yang dikembangkan menggunakan C# (razor component) berjalan secara native di perangkat, tidak di browser maupun web assembly.
• Embedded Web View, proses rendering UI terjadi pada komponen WebView yang tertanam di aplikasi (BlazorWebView) , yang mana WebView tersebut disediakan oleh Framework UI Native yang bertugas menampilkan web UI yang digenerate oleh blazor component. Channel interopt lokal menjembatani komunikasi antara proses .NET lokal dan webview. Saluran ini memungkinkan UI dirender dan interaksi pengguna (seperti klik) ditangani secara efisien tanpa perlu koneksi internet.
• Tidak memerlukan web assembly. Blazor Hybrid tidak seperti Blazor Client Side webassembly, karena blazor hybrid tidak menggunakan web assembly.
• Akses Native Penuh. Karena Blazor berjalan di lokal platform sehingga dapat mengakses penuh API perangkat (seperti akses ke file system).
• Felxible. Pengembang dapat mengkombinasikan blazor sesuai kebutuhan, apakah full blazor, campuran antara komponen UI Native dan Blazor, ataukah aplikasi dengan dominan UI Native dan beberapa elemen menggunakan blazor.

2. Blazor Web App

Blazor Web App adalah model aplikasi web terpadu yang menggabungkan Blazor Web Assembly dan Blazor Server ke dalam satu proyek tunggal yang flexibel. Model ini merupakan template project terpadu yang memungkinkan pengembang seleftif memilih mode rendering terbaik untuk setiap halaman atau komponen razor, sambil memanfaatkan kelebihan dari Blazor server dan Blazor Webassembly.

Karakteristik utama dari Blazor Web App adalah adanya Render Mode, memungkinkan pengembang memilih bagaimana dan di mana komponen razor dari Blazor di render. Berikut render mode yang tersedia :

• Static Server Side Rendering (SSR) , komponen di render di server sebagai halaman statis HTML yang tanpa interaktif. Hal ini mirip bagaimana halaman MVC / Razor Page di render sebagai konten statis.
• Interactive Server Side Rendering , komponen di render / diproses di sisi Server, update ke UI di kirim secara real time menggunakan koneksi Signal R, memungkinkan load time/waktu startup yang lebih cepat.
• Interactive Web Assembly, runtime .NET dan kode C# di download ke browser client dalam bentuk web assembly, memungkinkan aplikasi berjalan penuh di client dan memungkinkan eksekusi di browser secara offline.
• Interactive Auto Rendering, pada model rendering otomatis ini, aplikasi di awali pada startup menggunakan Interactive Server untuk mempercepat waktu loading, kemudiang berangsur angsur beralih ke mode Interactive Web Assembly ketika .NET runtime seluruhnya sudah di download dan semua assembly aplikasi sudah ter-cache di client.

Perbandingan Blazor dengan ASP.NET Web Forms

Blazor merupakan framework modern, component-based , yang tersedia di ASP.NET Core ekosistem. Sementara ASP.NET Web Form merupakan model framework pengembangan web lama yang berpusat pada ASP Page dibangun di atas legacy .NET Framework. Antara Blazor dan ASP.NET Web Form memiliki kesamaan, yaitu sama sama berbasis event (event driven programming model).

Meski hampir mirip, akan tetapi terdapat perbedaan mendasar antara ASP.NET WebForm dengan Blazor modern.

• Ekosistem :
  • ASP.NET web form sangat bergantung pada .NET Framework yang hanya tersedia di Windows saja. Hingga saat ini .NET Framework hanya tersedia hingga versi 4.8.2 dan tidak akan mengalami peningkatan versi maupun penambahan fitur lagi. ASP.NET web form tidak akan mendapatkan peningkatan fitur dan peningkatan performa dan tidak ada support terhadap web form di ASP.NET Core yang baru, ketergantungan pada library nugget untuk pengembangan juga menjadi terbatas karena pengembang library beralih ke .NET baru. Meski ada upaya Mono dan XSP untuk lintas platform namun kemampuan portingnya terbatas.
  • Blazor, Dibangun di atas framework ASP.NET Core dan .NET Core yang dapat bekerja lintas platform dan memiliki kinerja lebih cepat, dukungan terhadap Blazor lebih tinggi karena .NET core mengalami peningkatan versi terus menerus dan selalu di support. Hingga saat ini versi .NET telah mencapai versi 9 dan 10. .NET yang lintas platform memungkinkan Blazor dapat berjalan di web , desktop, maupun perangkat selular seperti android dan IOS.
• Model UI
  • ASP.NET Web Form memiliki model Page Base, dalam bentuk file .aspx berisi control server di dalamnya yang ketika di akses akan di render ke dalam HTML. ASP.NET Web form juga memiliki model component control server dalam bentuk file .ascx. Penggunaan ulang hanya bisa dilakukan untuk user control .ascx saja dan hanya untuk aplikasi web. Seluruh komponen di ASP.NET Web Form sangat bergantung pada ViewState.
  • Blazor, seluruh UI dalam blazor merupakan razor component (.razor) yang self-contained dan dapat digunakan ulang baik dalam aplikasi web maupun dalam aplikasi blazor hybrid (MAUI/WPF/WinForm).
• Kinerja
  • ASP.NET Web Form , menggunakan model PostBack untuk setiap event yang di trigger, sangat bergantung pada ViewState. Hal ini mengharuskan keseluruhan data Html Form dan ViewState harus dikirimkan bolak balik antara klien dan server untuk setiap event yang terjadi (baik on click, on selection change, dst). View State dapat menjadi sangat besar jika halaman berisi banyak user control, menyebabkan overhead penggunaan bandwidth yang sangat signifikan dan performa yang lambat.
  • Blazor web assembly, mirip seperti jaman silverlight, setelah semua runtime diunduh dan seluruh assembly aplikasi di unduh, aplikasi dapat berjalan secara offline tanpa perlu koneksi terus menerus ke server, memungkinkan aplikasi berjalan offline (Jika ada pengambilan data ke web API dan koneksi langsung ke DB tetap masih perlu koneksi jaringan).
  • Blazor Server, perubahan UI yang terjadi akibat adanya event yang di trigger hanya akan dikirimkan dalam bentuk pembaharuan UI minimal yang akan dikirimkan balik ke client melalui signal R, hal ini akan memberikan pengalaman interaktif yang hampir real time dan tanpa flickr.

Mengapa Perlu Beralih dari ASP.NET Web Form ke Blazor?

• Pembaruan versi .NET terbaru yang lebih didukung dengan fitur baru , peningkatan keamanan, dan peningkatan kinerja. Versi .NET Framework lama saat ini memasukin masa maintenis/pengelolaan oleh Microsoft dan tidak akan mendapat peningkatan versi.
• Sama sama event driven, Baik Blazor maupun ASP.NET Web Form memberikan pengalaman pengembangan web yang event driven berbasis event sehingga mudah untuk beralih dengan skill yang ada saat ini dan learning curve yang kecil. Blazor memberikan pengalaman pemrograman yang lebih akrab dibandingkan framework SPA seperti React atau Angular.
• Blazor dinilai lebih memudahkan untuk pengembangan fullstack karena hanya perlu 1 bahasa pemrograman saja. Blazor hanya perlu C# untuk mengembangkan UI halaman dan kode backend.
• Cross Platform, Blazor dari ASP .NET core memungkinkan dapat berjalan di OS selain Windows (jika sewaktu waktu diperlukan), Cloud, platform desktop, dan perangkat selular. Berbeda dengan ASP.NET Web Form yang tidak didukung pada .NET Core dan hanya dapat berjalan di IIS OS Windows Server saja.

Untuk artikel selanjutnya Part 2 bisa dikunjungi di alamat https://bayuprn.com/2025/09/apa-itu-blazor-di-asp-net-9-part-2/