model hosting ASP.NET Core Blazor

Artikel ini menjelaskan Blazor model hosting, terutama difokuskan pada Blazor Server aplikasi dan Blazor WebAssembly dalam versi .NET yang lebih lama dari .NET 8. Panduan dalam artikel ini relevan di bawah semua rilis .NET untuk Blazor Hybrid aplikasi yang berjalan pada platform seluler dan desktop asli. BlazorWeb Apps di .NET 8 atau yang lebih baru dikonsep lebih baik oleh bagaimana Razor komponen dirender, yang digambarkan sebagai mode render mereka. Mode render disentuh secara singkat dalam artikel Gambaran umum Dasar dan dibahas secara rinci dalam mode render ASP.NET Core Blazor dari node Komponen.

Blazor adalah kerangka kerja web untuk membangun komponen antarmuka pengguna web (Razor komponen) yang dapat dihosting dengan cara yang berbeda. Razor komponen dapat menjalankan sisi server di ASP.NET Core (Blazor Server) versus sisi klien di browser pada runtime .NET berbasis WebAssembly (Blazor WebAssembly, Blazor WASM). Anda juga dapat menghosting Razor komponen di aplikasi seluler dan desktop asli yang dirender ke kontrol yang disematkan Web View (Blazor Hybrid). Terlepas dari model hosting, cara Anda membangun Razor komponen sama. Komponen yang sama Razor dapat digunakan dengan salah satu model hosting yang tidak berubah.

Blazor Server

Blazor Server Dengan model hosting, komponen dijalankan di server dari dalam aplikasi ASP.NET Core. Pembaruan UI, penanganan peristiwa, dan panggilan JavaScript ditangani melalui SignalR koneksi menggunakan protokol WebSockets. Status pada server yang terkait dengan setiap klien yang terhubung disebut sirkuit. Sirkuit tidak terkait dengan koneksi jaringan tertentu dan dapat mentolerir gangguan jaringan sementara dan upaya klien untuk terhubung kembali ke server ketika koneksi hilang.

Dalam aplikasi tradisional yang dirender server, membuka aplikasi yang sama di beberapa layar browser (tab atau iframes) biasanya tidak diterjemahkan ke dalam tuntutan sumber daya tambahan di server. Blazor Server Untuk model hosting, setiap layar browser memerlukan sirkuit terpisah dan instans terpisah dari status komponen yang dikelola server. Blazor mempertimbangkan untuk menutup tab browser atau menavigasi ke URL eksternal sebagai penghentian yang anggun . Jika terjadi penghentian yang anggun, sirkuit dan sumber daya terkait segera dirilis. Klien juga dapat memutuskan sambungan tanpa anggun, misalnya karena gangguan jaringan. Blazor Server menyimpan sirkuit yang terputus untuk interval yang dapat dikonfigurasi untuk memungkinkan klien terhubung kembali.

Pada klien, Blazor skrip membuat SignalR koneksi dengan server. Skrip disajikan dari sumber daya yang disematkan dalam kerangka kerja bersama ASP.NET Core.

Model Blazor Server hosting menawarkan beberapa manfaat:

• Ukuran unduhan secara signifikan lebih kecil daripada ketika Blazor WebAssembly model hosting digunakan, dan aplikasi dimuat jauh lebih cepat.
• Aplikasi ini memanfaatkan sepenuhnya kemampuan server, termasuk penggunaan .NET Core API.
• .NET Core di server digunakan untuk menjalankan aplikasi, sehingga alat .NET yang ada, seperti penelusuran kesalahan, berfungsi seperti yang diharapkan.
• Klien tipis didukung. Misalnya, Blazor Server berfungsi dengan browser yang tidak mendukung WebAssembly dan pada perangkat yang dibatasi sumber daya.
• Dasar kode .NET/C# aplikasi, termasuk kode komponen aplikasi tidak disajikan ke klien.

Model Blazor Server hosting memiliki batasan berikut:

• Latensi yang lebih tinggi biasanya ada. Setiap interaksi pengguna melibatkan lompatan jaringan.
• Tidak ada dukungan offline. Jika koneksi klien gagal, interaktivitas gagal.
• Menskalakan aplikasi dengan banyak pengguna memerlukan sumber daya server untuk menangani beberapa koneksi klien dan status klien.
• Server ASP.NET Core dibutuhkan untuk menjalankan aplikasi. Skenario penyebaran tanpa server tidak dimungkinkan, seperti melayani aplikasi dari Content Delivery Network (CDN).

Sebaiknya gunakan Azure SignalR Service untuk aplikasi yang mengadopsi Blazor Server model hosting. Layanan ini memungkinkan peningkatan Blazor Server skala aplikasi ke sejumlah besar koneksi bersamaan SignalR .

Blazor WebAssembly

Model Blazor WebAssembly hosting menjalankan komponen sisi klien di browser pada runtime .NET berbasis WebAssembly. Razor komponen, dependensinya, dan runtime .NET diunduh ke browser. Komponen dijalankan langsung pada utas UI browser. Pembaruan UI dan penanganan peristiwa terjadi dalam proses yang sama. Aset disebarkan sebagai file statis ke server web atau layanan yang mampu melayani konten statis kepada klien.

Blazor aplikasi web dapat menggunakan Blazor WebAssembly model hosting untuk mengaktifkan interaktivitas sisi klien. Saat aplikasi dibuat yang secara eksklusif berjalan pada Blazor WebAssembly model hosting tanpa penyajian dan interaktivitas sisi server, aplikasi disebut aplikasi mandiriBlazor WebAssembly .

Saat aplikasi mandiri Blazor WebAssembly menggunakan aplikasi backend ASP.NET Core untuk menyajikan filenya, aplikasi ini disebut aplikasi yang dihostingBlazor WebAssembly . Menggunakan yang dihosting Blazor WebAssembly, Anda mendapatkan pengalaman pengembangan web tumpukan penuh dengan .NET, termasuk kemampuan untuk berbagi kode antara aplikasi klien dan server, dukungan untuk pra-penyajian, dan integrasi dengan MVC dan Razor Pages. Aplikasi klien yang dihosting dapat berinteraksi dengan aplikasi server ujung belakangnya melalui jaringan menggunakan berbagai kerangka kerja dan protokol olahpesan, seperti API web, gRPC-web, dan SignalR (Gunakan ASP.NET Core SignalR dengan Blazor).

Aplikasi Blazor WebAssembly yang dibangun sebagai Aplikasi Web Progresif (PWA) menggunakan API browser modern untuk memungkinkan banyak kemampuan aplikasi klien asli, seperti bekerja offline, berjalan di jendela aplikasinya sendiri, meluncurkan dari sistem operasi host, menerima pemberitahuan push, dan memperbarui secara otomatis di latar belakang.

Blazor Skrip menangani:

• Mengunduh runtime .NET, Razor komponen, dan dependensi komponen.
• Inisialisasi runtime.

Ukuran aplikasi yang diterbitkan, ukuran payloadnya, merupakan faktor performa yang penting untuk kegunaan aplikasi. Aplikasi besar membutuhkan waktu yang relatif lama untuk diunduh ke browser, yang mengurangi pengalaman pengguna. Blazor WebAssembly mengoptimalkan ukuran payload untuk mengurangi waktu pengunduhan:

• Kode yang tidak digunakan dikeluarkan dari aplikasi saat diterbitkan oleh Pemangkas Bahasa Perantara (IL).
• Respons HTTP dipadatkan.
• Runtime bahasa umum dan rakitan .NET di-cache di browser.

Model Blazor WebAssembly hosting menawarkan beberapa manfaat:

• Untuk aplikasi mandiri Blazor WebAssembly , tidak ada dependensi sisi server .NET setelah aplikasi diunduh dari server, sehingga aplikasi tetap berfungsi jika server offline.
• Sumber daya dan kemampuan klien dimanfaatkan sepenuhnya.
• Pekerjaan diturunkan dari server ke klien.
• Untuk aplikasi mandiri Blazor WebAssembly , server web ASP.NET Core tidak diperlukan untuk menghosting aplikasi. Skenario penyebaran tanpa server dimungkinkan, seperti melayani aplikasi dari Content Delivery Network (CDN).

Model Blazor WebAssembly hosting memiliki batasan berikut:

• Razor komponen dibatasi untuk kemampuan browser.
• Perangkat keras dan perangkat lunak klien yang mampu (misalnya, dukungan WebAssembly) diperlukan.
• Ukuran unduhan lebih besar, dan komponen membutuhkan waktu lebih lama untuk dimuat.
• Kode yang dikirim ke klien tidak dapat dilindungi dari inspeksi dan perusakan oleh pengguna.

Interpreter .NET Intermediate Language (IL) mencakup dukungan runtime just-in-time (JIT) parsial untuk mencapai performa runtime yang ditingkatkan. Penerjemah JIT mengoptimalkan eksekusi bytecode interpreter dengan menggantinya dengan blob kecil kode WebAssembly. Penerjemah JIT diaktifkan secara otomatis untuk Blazor WebAssembly aplikasi kecuali saat penelusuran kesalahan.

Blazor mendukung kompilasi ahead-of-time (AOT), di mana Anda dapat mengkompilasi kode .NET langsung ke WebAssembly. Kompilasi AOT menghasilkan peningkatan performa runtime dengan mengorbankan ukuran aplikasi yang lebih besar. Untuk informasi selengkapnya, lihat ASP.NET alat build Core Blazor WebAssembly dan kompilasi ahead-of-time (AOT).

Alat build .NET WebAssembly yang sama yang digunakan untuk kompilasi AOT juga menautkan ulang runtime .NET WebAssembly untuk memangkas kode runtime yang tidak digunakan. Blazor juga memangkas kode yang tidak digunakan dari pustaka .NET framework. Pengompilasi .NET selanjutnya melakukan prekompresi aplikasi mandiri Blazor WebAssembly untuk payload aplikasi yang lebih kecil.

Komponen yang dirender Razor WebAssembly dapat menggunakan dependensi asli yang dibuat untuk berjalan di WebAssembly.

Blazor Hybrid

Blazor juga dapat digunakan untuk membangun aplikasi klien asli menggunakan pendekatan hibrid. Aplikasi hibrid adalah aplikasi asli yang memanfaatkan teknologi web untuk fungsionalitasnya. Dalam aplikasi Blazor Hybrid , Razor komponen berjalan langsung di aplikasi asli (bukan di WebAssembly) bersama dengan kode .NET lainnya dan merender UI web berdasarkan HTML dan CSS ke kontrol yang disematkan Web View melalui saluran interop lokal.

Blazor Hybridaplikasi dapat dibangun menggunakan kerangka kerja aplikasi asli .NET yang berbeda, termasuk .NET MAUI, WPF, dan Formulir Windows. Blazor menyediakan BlazorWebView kontrol untuk menambahkan Razor komponen ke aplikasi yang dibangun dengan kerangka kerja ini. Menggunakan Blazor dengan .NET MAUI menawarkan cara yang nyaman untuk membangun aplikasi lintas platform Blazor Hybrid untuk seluler dan desktop, sementara Blazor integrasi dengan WPF dan Formulir Windows dapat menjadi cara yang bagus untuk memodernisasi aplikasi yang ada.

Karena Blazor Hybrid aplikasi adalah aplikasi asli, aplikasi tersebut dapat mendukung fungsionalitas yang tidak hanya tersedia dengan platform web. Blazor Hybrid aplikasi memiliki akses penuh ke kemampuan platform asli melalui API .NET normal. Blazor Hybridaplikasi juga dapat berbagi dan menggunakan kembali komponen dengan aplikasi atau Blazor WebAssembly yang sudah adaBlazor Server. Blazor Hybrid aplikasi menggabungkan manfaat web, aplikasi asli, dan platform .NET.

Model Blazor Hybrid hosting menawarkan beberapa manfaat:

• Gunakan kembali komponen yang ada yang dapat dibagikan di seluruh seluler, desktop, dan web.
• Manfaatkan keterampilan, pengalaman, dan sumber daya pengembangan web.
• Aplikasi memiliki akses penuh ke kemampuan asli perangkat.

Model Blazor Hybrid hosting memiliki batasan berikut:

• Aplikasi klien asli terpisah harus dibangun, disebarkan, dan dikelola untuk setiap platform target.
• Aplikasi klien asli biasanya membutuhkan waktu lebih lama untuk menemukan, mengunduh, dan menginstal melalui mengakses aplikasi web di browser.

Untuk informasi selengkapnya, lihat ASP.NET Core Blazor Hybrid.

Untuk informasi selengkapnya tentang kerangka kerja klien asli Microsoft, lihat sumber daya berikut ini:

• .NET Multi-platform App UIAku akan menemuinya..NET MAUI
• Windows Presentation Foundation (WPF)
• Formulir Windows

Model hosting mana yang Blazor harus saya pilih?

Model hosting komponen diatur oleh mode rendernya, baik pada waktu kompilasi atau runtime, yang dijelaskan dengan contoh dalam mode render inti Blazor ASP.NET. Tabel berikut menunjukkan pertimbangan utama untuk mengatur mode render untuk menentukan model hosting komponen. Untuk aplikasi mandiri Blazor WebAssembly , semua komponen aplikasi dirender pada klien dengan Blazor WebAssembly model hosting.

Blazor Hybridaplikasi termasuk .NET MAUI, WPF, dan aplikasi kerangka kerja Formulir Windows.

Fitur	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
Kompatibilitas .NET API lengkap	✔️Didukung	❌Tidak didukung	✔️Didukung
Akses langsung ke server dan sumber daya jaringan	✔️Didukung	❌Tidak didukung†	❌Tidak didukung†
Ukuran payload kecil dengan waktu muat awal yang cepat	✔️Didukung	❌Tidak didukung	❌Tidak didukung
Kecepatan eksekusi mendekati native	✔️Didukung	✔️Didukung‡	✔️Didukung
Kode aplikasi aman dan privat di server	✔️Didukung	❌Tidak didukung†	❌Tidak didukung†
Jalankan aplikasi offline setelah diunduh	❌Tidak didukung	✔️Didukung	✔️Didukung
Hosting situs statis	❌Tidak didukung	✔️Didukung	❌Tidak didukung
Membongkar pemrosesan ke klien	❌Tidak didukung	✔️Didukung	✔️Didukung
Akses penuh ke kemampuan klien asli	❌Tidak didukung	❌Tidak didukung	✔️Didukung
Penyebaran berbasis web	✔️Didukung	✔️Didukung	❌Tidak didukung

Blazor WebAssembly† dan Blazor Hybrid aplikasi dapat menggunakan API berbasis server untuk mengakses sumber daya server/jaringan dan mengakses kode aplikasi privat dan aman.
Blazor WebAssembly‡ hanya mencapai performa hampir asli dengan kompilasi ahead-of-time (AOT).

Setelah memilih model hosting aplikasi, Anda dapat membuat Blazor Server aplikasi atau Blazor WebAssembly dari Blazor templat proyek. Untuk informasi selengkapnya, lihat Alat untuk ASP.NET Core Blazor.

Untuk membuat Blazor Hybrid aplikasi, lihat artikel di bawah tutorial ASP.NET CoreBlazor Hybrid.

Kompatibilitas .NET API lengkap

Komponen yang dirender untuk Blazor Server model hosting dan Blazor Hybrid aplikasi memiliki kompatibilitas .NET API lengkap, sementara komponen yang dirender untuk Blazor WebAssembly terbatas pada subset API .NET. Saat spesifikasi aplikasi memerlukan satu atau beberapa API .NET yang tidak tersedia untuk komponen yang dirender WebAssembly, lalu pilih untuk merender komponen untuk Blazor Server atau menggunakan Blazor Hybrid.

Akses langsung ke server dan sumber daya jaringan

Komponen yang dirender untuk Blazor Server model hosting memiliki akses langsung ke server dan sumber daya jaringan tempat aplikasi dijalankan. Karena komponen yang dihosting menggunakan Blazor WebAssembly atau Blazor Hybrid menjalankan pada klien, komponen tidak memiliki akses langsung ke server dan sumber daya jaringan. Komponen dapat mengakses server dan sumber daya jaringan secara tidak langsung melalui API berbasis server yang dilindungi. API berbasis server mungkin tersedia melalui pustaka, paket, dan layanan pihak ketiga. Pertimbangkan pertimbangan berikut:

• Pustaka, paket, dan layanan pihak ketiga mungkin mahal untuk menerapkan dan memelihara, didukung dengan lemah, atau menimbulkan risiko keamanan.
• Jika satu atau beberapa API berbasis server dikembangkan secara internal oleh organisasi Anda, sumber daya tambahan diperlukan untuk membangun dan memeliharanya.

Blazor Server Gunakan model hosting untuk menghindari kebutuhan untuk mengekspos API dari lingkungan server.

Ukuran payload kecil dengan waktu muat awal yang cepat

Komponen rendering dari server mengurangi ukuran payload aplikasi dan meningkatkan waktu muat awal. Ketika waktu muat awal yang cepat diinginkan, gunakan Blazor Server model hosting atau pertimbangkan penyajian sisi server statis.

Kecepatan eksekusi mendekati native

Blazor Hybrid aplikasi berjalan menggunakan runtime .NET secara asli pada platform target, yang menawarkan kecepatan terbaik.

Komponen yang dirender untuk Blazor WebAssembly model hosting, termasuk Progressive Web Apps (PWAs), dan aplikasi mandiri Blazor WebAssembly berjalan menggunakan runtime .NET untuk WebAssembly, yang lebih lambat daripada berjalan langsung di platform. Pertimbangkan untuk menggunakan ahead-of-time (AOT) yang dikompilasi untuk meningkatkan performa runtime saat menggunakan Blazor WebAssembly.

Kode aplikasi aman dan privat di server

Mempertahankan kode aplikasi dengan aman dan privat di server adalah fitur bawaan komponen yang dirender untuk Blazor Server model hosting. Komponen yang dirender menggunakan Blazor WebAssembly model hosting atau Blazor Hybrid dapat menggunakan API berbasis server untuk mengakses fungsionalitas yang harus dirahasiakan dan diamankan. Pertimbangan untuk mengembangkan dan memelihara API berbasis server yang dijelaskan di bagian Akses langsung ke server dan sumber daya jaringan berlaku. Jika pengembangan dan pemeliharaan API berbasis server tidak diinginkan untuk mempertahankan kode aplikasi yang aman dan privat, render komponen untuk Blazor Server model hosting.

Jalankan aplikasi offline setelah diunduh

Aplikasi mandiri Blazor WebAssembly yang dibangun sebagai Progressive Web Apps (PWAs) dan Blazor Hybrid aplikasi dapat berjalan offline, yang sangat berguna ketika klien tidak dapat terhubung ke Internet. Komponen yang dirender untuk Blazor Server model hosting gagal dijalankan ketika koneksi ke server hilang. Jika aplikasi harus berjalan offline, mandiri Blazor WebAssembly , dan Blazor Hybrid merupakan pilihan terbaik.

Hosting situs statis

Hosting situs statis dimungkinkan dengan aplikasi mandiri Blazor WebAssembly karena diunduh ke klien sebagai sekumpulan file statis. Aplikasi mandiri Blazor WebAssembly tidak memerlukan server untuk menjalankan kode sisi server untuk mengunduh dan menjalankan dan dapat dikirimkan melalui Content Delivery Network (CDN) (misalnya, Azure CDN).

Meskipun Blazor Hybrid aplikasi dikompilasi menjadi satu atau beberapa aset penyebaran mandiri, aset biasanya diberikan kepada klien melalui penyimpanan aplikasi pihak ketiga. Jika hosting statis adalah persyaratan aplikasi, pilih mandiri Blazor WebAssembly.

Membongkar pemrosesan ke klien

Blazor WebAssembly dan Blazor Hybrid aplikasi dijalankan pada klien dan dengan demikian membongkar pemrosesan ke klien. Blazor Server aplikasi dijalankan di server, sehingga permintaan sumber daya server biasanya meningkat dengan jumlah pengguna dan jumlah pemrosesan yang diperlukan per pengguna. Jika memungkinkan untuk membongkar sebagian besar atau semua pemrosesan aplikasi ke klien dan aplikasi memproses sejumlah besar data, Blazor WebAssembly atau Blazor Hybrid merupakan pilihan terbaik.

Akses penuh ke kemampuan klien asli

Blazor Hybrid aplikasi memiliki akses penuh ke kemampuan API klien asli melalui kerangka kerja aplikasi asli .NET. Di Blazor Hybrid aplikasi, Razor komponen berjalan langsung di aplikasi asli, bukan di WebAssembly. Ketika kemampuan klien penuh adalah persyaratan, Blazor Hybrid adalah pilihan terbaik.

Penyebaran berbasis web

Blazor aplikasi web diperbarui pada refresh aplikasi berikutnya dari browser.

Blazor Hybrid aplikasi adalah aplikasi klien asli yang biasanya memerlukan mekanisme penyebaran khusus penginstal dan platform.

Mengatur model hosting komponen

Untuk mengatur model hosting komponen ke Blazor Server atau pada waktu kompilasi Blazor WebAssembly atau dinamis saat runtime, Anda mengatur mode render-nya. Mode render sepenuhnya dijelaskan dan ditunjukkan dalam artikel mode render ASP.NET CoreBlazor. Kami tidak menyarankan Anda melompat dari artikel ini langsung ke artikel Mode render tanpa membaca konten dalam artikel di antara kedua artikel ini. Misalnya, mode render lebih mudah dipahami Razor dengan melihat contoh komponen, tetapi struktur dan fungsi komponen dasar Razor tidak tercakup sampai artikel dasar-dasar ASP.NET Core Blazor tercapai. Penting juga untuk mempelajari tentang Blazortemplat dan alat proyek sebelum bekerja dengan contoh komponen dalam artikel Mode render.