agaimana Memilih Model Hosting Blazor Sesuai Kebutuhan

Blazor Server versus Blazor WebAssembly: keuntungan dan kerugian

Blazor adalah framework untuk membangun UI (user interface ‘antarmuka pengguna’) web sisi klien. Untuk membangun aplikasi web dengan UI interaktif yang kaya dan dinamis, Blazor menggunakan C# tanpa harus menggunakan JavaScript. Aplikasi Blazor terdiri atas komponen UI web yang dapat digunakan kembali yang diimplementasikan menggunakan C#, HTML dan CSS. Kode klien dan server ditulis dalam C#, sehingga dimungkinkan untuk berbagi kode dan pustaka.

Blazor menawarkan dua model hosting:
(1) Blazor Server yaitu model hosting sisi server.
(2) Blazor WebAssembly yaitu model hosting sisi klien.
Keduanya — dengan segala kelebihan dan kekurangannya — memiliki model aplikasi dan komponen yang sama. Selanjutnya dibahas pula bagaimana membuat web menggunakan template Blazor bawaan ASP.NET Core 3.1 untuk setiap model hosting. Untuk itu, ASP.NET Core harus sudah terpasang di komputer.

Instalasi ASP.NET Core 3.1 dan Blazor Extensions pada Windows

Model Hosting Blazor Server

Pada model hosting ini, aplikasi dijalankan di server. Koneksi antara klien dan server menggunakan SignalR. Ketika suatu event (kejadian) muncul pada klien, sebuah tombol diklik misalnya, informasi tentang kejadian tersebut dikirim ke server melalui koneksi SignalR. Server menangani kejadian dan menghitung perbedaan HTML antara sebelum dan sesudah kejadian. Keseluruhan HTML tidak lagi dikirim ke klien, hanya perbedaannya yang dikirim ke klien melalui koneksi SignalR. Browser kemudian memperbarui antarmuka pengguna. Karena hanya perbedaanya yang dikirim, proses pembaruan antarmuka menjadi lebih cepat dan lebih responsif.

Keuntungan Model Hosting Blazor Server

• Ukuran unduhan secara signifikan lebih kecil daripada aplikasi Blazor WebAssembly sehingga loading-nya lebih cepat.
• Aplikasi memanfaatkan sepenuhnya kemampuan server, termasuk penggunaan API yang kompatibel dengan .NET Core.
• .NET Core pada server digunakan untuk menjalankan aplikasi, sehingga kakasnya, seperti debugging, berfungsi sesuai dengan yang diharapkan.
• Klien dengan sumber daya terbatas tetap dapat berfungsi. Bahkan browser yang tidak mendukung WebAssembly pun dapat digunakan.
• Lebih aman karena kode .NET / C# aplikasi, termasuk kode komponen aplikasi, berada di server, tidak diunduh ke klien.

Kerugian Model Hosting Blazor Server

• Diperlukan server ASP.NET Core yang lengkap sebagai host aplikasi. Skenario penerapan tanpa server tidak dimungkinkan.
• Tidak ada dukungan offline, koneksi aktif ke server selalu diperlukan. Jika server mati, aplikasi berhenti bekerja.
• Karena setiap interaksi pengguna melibatkan perjalanan pulang-pergi ke server, jeda waktu lebih lama bila dibandingkan dengan hosting Blazor WebAssembly.
• Skalabilitas boleh jadi merupakan tantangan tersendiri, terutama untuk aplikasi yang memiliki banyak pengguna karena server harus mengelola beberapa koneksi klien dan menangani status klien.

Membuat Aplikasi Blazor Server

• Buka Visual Studio 2019

• Klik Create a new project untuk membuat proyek baru.

• Pilih Blazor App, klik Next.

• Nama proyek default, BlazorApp1, boleh diubah, misalnya dinamai dengan BlazorServerApp.
• Klik … untuk menentukan folder lokasi penyimpanan file proyek.
• Klik Create.

• Dari dua pilihan model hosting, pilih Blazor Server App.
• Klik Create.

Menjalankan Aplikasi Blazor Server

• Bagian kanan layar adalah daftar file dan folder yang merupakan struktur proyek ASP.NET Core Blazor Server.
• Pilih menu Debug|Start Debugging atau tekan F5 untuk melakukan debugging dan menampilkan homepage berikut.

Model Hosting Blazor WebAssembly

Pada model hosting ini, aplikasi berjalan langsung di browser menggunakan WebAssembly. Semua yang dibutuhkan yaitu aplikasi yang dikompilasi, dependensinya, dan .NET runtime diunduh dari server ke browser klien. Aplikasi Blazor WebAssembly dapat berjalan sepenuhnya di sisi klien tanpa koneksi ke server. Bila perlu, secara opsional konfigurasi dapat dilakukan supaya aplikasi Blazor WebAssembly dapat berinteraksi dengan server melalui jaringan menggunakan API atau SignalR.

Keuntungan Model Hosting Blazor WebAssembly

• Aplikasi Blazor WebAssembly dapat berjalan sepenuhnya di mesin klien. Setelah aplikasi diunduh, koneksi ke server tidak diperlukan.
• Pekerjaan diturunkan dari server ke klien. Sumber daya dan kapabilitas klien sepenuhnya dimanfaatkan.
• Server web ASP.NET Core sebagai host aplikasi tidak diperlukan. Skenario penerapan tanpa server dimungkinkan, misalnya menggunakan layanan dari CDN (Content Delivery Network).

Kerugian Model Hosting Blazor WebAssembly

• Ukuran unduhan lebih besar, perlu waktu lebih lama untuk memuatnya dari server ke klien.
• Karena aplikasi berjalan sepenuhnya pada browser klien, aplikasi dibatasi oleh kapabilitas browser.
• Memerlukan perangkat keras dan perangkat lunak klien yang memadai. Sebagai contoh, sekurang-kurangnya diperlukan browser dengan dukungan WebAssembly.

Membuat Aplikasi Blazor WebAssembly

• Lakukan langkah seperti pada pembuatan aplikasi Blazor Server di atas.
• Ketika muncul layar berikut:

• Ketikkan BlazorWebAssemblyApp sebagai nama proyeknya
• Klik … untuk menentukan folder lokasi penyimpanan file proyek.
• Klik Create.
• Selanjutnya muncul layar berikut:

• Pilih Blazor WebAssembly App, lalu klik Create.

Menjalankan Aplikasi Blazor WebAssembly

• Bagian kanan layar adalah daftar file dan folder yang merupakan struktur proyek ASP.NET Core Blazor WebAssembly.
• Pilih menu Debug|Start Without Debugging atau tekan Ctrl F5 untuk mengabaikan proses debugging dan menampilkan home page berikut.

Pilih yang mana?

Setiap pilihan memiliki kelebihan dan kekurangan. Menurut pendapat penulis, bila keamanan tidak terlalu penting, pilihlah model hosting Blazor WebAssembly. Model ini memerlukan konekasi internet hanya di awal ketika menguduh aplikasi. Setelah aplikasi diunduh, koneksi ke server tidak diperlukan. Dengan demikian, server web ASP.NET Core sebagai host aplikasi juga tidak diperlukan lagi.

Pilihlah model hosting Blazor Server bila Anda memerlukan keamanan yang lebih tinggi. Aplikasi dapat memanfaatkan sepenuhnya kemampuan server, termasuk penggunaan API yang kompatibel dengan .NET Core. Klien dengan sumber daya terbatas tetap dapat berfungsi, bahkan dapat menggunakan browser yang tidak mendukung WebAssembly.

Referensi

Get started with ASP.NET Core Blazor

ASP.NET Core Blazor hosting models

Microsoft Blazor