Mengintegrasikan komponen ASP.NET Core Razor dengan MVC atau Razor Pages dalam solusi yang dihosting Blazor WebAssembly

Note

Solusi yang dihosting Blazor WebAssembly tetap didukung, tetapi templat proyek dihapus dan tidak lagi didukung di .NET 8 atau yang lebih baru. Artikel ini muncul dalam daftar isi hingga .NET 7 untuk referensi, tetapi perhatikan bahwa .NET 7 adalah rilis Istilah Dukungan Standar yang tidak lagi didukung.

Warning

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi lebih lanjut, lihat Kebijakan Dukungan .NET dan .NET Core .

Artikel ini menjelaskan Razor skenario integrasi komponen untuk aplikasi yang dihosting Blazor WebAssembly , termasuk pra-penyajian Razor komponen di server.

Important

Perubahan kerangka kerja di berbagai rilis ASP.NET Core menyebabkan munculnya set instruksi yang berbeda dalam artikel ini. Sebelum menggunakan panduan dari artikel ini, pastikan pemilih versi dokumen di bagian atas artikel ini cocok dengan versi ASP.NET Core yang ingin Anda gunakan untuk aplikasi Anda.

Prerendering dapat meningkatkan Search Engine Optimization (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.

Konfigurasi solusi

Konfigurasi pra-penyajian

Untuk menyiapkan pra-penyajian untuk aplikasi yang dihosting Blazor WebAssembly :

1. Host aplikasi Blazor WebAssembly di aplikasi ASP.NET Core. Aplikasi mandiri Blazor WebAssembly dapat ditambahkan ke solusi ASP.NET Core, atau Anda dapat menggunakan aplikasi yang dihosting Blazor WebAssembly yang dibuat dari Blazor WebAssembly templat proyek dengan opsi yang dihosting:

   • Visual Studio: Dalam dialog Informasi tambahan , pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama BlazorHosted.
   • Shell perintah Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (gunakan -ho|--hosted opsi ). -o|--output {LOCATION} Gunakan opsi untuk membuat folder untuk solusi dan mengatur namespace proyek solusi. Dalam contoh artikel ini, solusinya diberi nama BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

   Untuk contoh dalam artikel ini, nama solusi yang dihosting (nama rakitan) adalah BlazorHosted. Namespace proyek klien adalah BlazorHosted.Client, dan namespace proyek server adalah BlazorHosted.Server.

2. wwwroot/index.html file dari Blazor WebAssemblyClient proyek.

3. Client Dalam proyek, hapus baris berikut di Program.cs:

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Tambahkan _Host.cshtml file ke Server folder proyek Pages . Anda dapat memperoleh file dari proyek yang dibuat dari Blazor Server templat menggunakan Visual Studio atau menggunakan .NET CLI dengan dotnet new blazorserver -o BlazorServer perintah dalam shell perintah ( -o BlazorServer opsi membuat folder untuk proyek). Setelah menempatkan file ke Server folder proyek Pages , buat perubahan berikut pada file.

   Buat perubahan berikut pada _Host.cshtml file:

   • Pages Perbarui namespace layanan di bagian atas file agar sesuai dengan namespace Server halaman aplikasi. Tempat {APP NAMESPACE} penampung dalam contoh berikut mewakili namespace halaman aplikasi donor yang menyediakan _Host.cshtml file:

     Delete:

     - @namespace {APP NAMESPACE}.Pages
     

     Add:

     @namespace BlazorHosted.Server.Pages
     

   • Tambahkan direktif @using untuk Client proyek di bagian atas file:

     @using BlazorHosted.Client
     

   • Perbarui tautan lembar gaya untuk menunjuk ke lembar gaya proyek WebAssembly. Dalam contoh berikut, namespace proyek klien adalah BlazorHosted.Client. Tempat {APP NAMESPACE} penampung mewakili namespace aplikasi donor yang menyediakan _Host.cshtml file. Perbarui Pembantu Tag Komponen (<component> tag) agar HeadOutlet komponen dapat merender komponen.

     Delete:

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
     - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     

     Add:

     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
     

     Note

     <link> Biarkan elemen yang meminta lembar gaya Bootstrap (css/bootstrap/bootstrap.min.css) di tempat.

   • Blazor Perbarui sumber skrip untuk menggunakan skrip sisi Blazor WebAssembly klien:

     Delete:

     - <script src="_framework/blazor.server.js"></script>
     

     Add:

     <script src="_framework/blazor.webassembly.js"></script>
     

   • render-mode Perbarui Pembantu Tag Komponen untuk merender komponen akar App dengan WebAssemblyPrerendered:

     Delete:

     - <component type="typeof(App)" render-mode="ServerPrerendered" />
     

     Add:

     <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
     

     Important

     Pra-penyajian tidak didukung untuk titik akhir autentikasi (/authentication/ segmen jalur). Untuk informasi lebih lanjut, lihat skenario keamanan tambahan Blazor WebAssembly ASP.NET Core.

5. Program.cs Dalam file Server proyek, ubah titik akhir fallback dari index.html file ke _Host.cshtml halaman:

   Delete:

   - app.MapFallbackToFile("index.html");
   

   Add:

   app.MapFallbackToPage("/_Host");
   

6. Client Jika proyek dan Server menggunakan satu atau beberapa layanan umum selama pra-penyajian, faktori pendaftaran layanan ke dalam metode yang dapat dipanggil dari kedua proyek. Untuk informasi selengkapnya, lihat Injeksi dependensi ASP.NET Core Blazor.

7. Jalankan proyek Server. Aplikasi yang dihosting Blazor WebAssembly telah di-prerender oleh Server proyek untuk klien.

Konfigurasi untuk menyematkan Razor komponen ke dalam halaman atau tampilan

Bagian dan contoh berikut untuk menyematkan Razor komponen dari ClientBlazor WebAssembly aplikasi ke dalam halaman atau tampilan aplikasi server memerlukan konfigurasi tambahan.

Proyek Server harus memiliki file dan folder berikut.

Razor Halaman:

• Pages/Shared/_Layout.cshtml
• Pages/Shared/_Layout.cshtml.css
• Pages/_ViewImports.cshtml
• Pages/_ViewStart.cshtml

MVC:

• Views/Shared/_Layout.cshtml
• Views/Shared/_Layout.cshtml.css
• Views/_ViewImports.cshtml
• Views/_ViewStart.cshtml

File sebelumnya dapat diperoleh dengan membuat aplikasi dari templat proyek ASP.NET Core menggunakan:

• Alat pembuatan proyek baru Visual Studio.
• Membuka shell perintah dan mengeksekusi dotnet new webapp -o {PROJECT NAME} (Razor Pages) atau dotnet new mvc -o {PROJECT NAME} (MVC). Opsi -o|--output dengan nilai untuk {PROJECT NAME} tempat penampung menyediakan nama untuk aplikasi dan membuat folder untuk aplikasi.

Perbarui namespace dalam file yang diimpor _ViewImports.cshtml agar sesuai dengan yang digunakan oleh proyek yang Server menerima file.

Pages/_ViewImports.cshtml (Razor Halaman):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Perbarui file tata letak yang diimpor, yaitu Pages/Shared/_Layout.cshtml untuk Razor Pages atau Views/Shared/_Layout.cshtml untuk MVC.

Pertama, hapus judul dan lembar gaya dari proyek donor, yang ada RPDonor.styles.css dalam contoh berikut. Tempat {PROJECT NAME} penampung mewakili nama aplikasi proyek donor.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Sertakan Client gaya proyek dalam file tata letak. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client. Elemen <title> dapat diperbarui secara bersamaan.

Tempatkan baris berikut dalam <head> konten file tata letak:

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Tata letak yang diimpor berisi dua Home (Index halaman) dan Privacy tautan navigasi. Untuk membuat Home tautan menunjuk ke aplikasi yang dihosting Blazor WebAssembly , ubah hyperlink:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Dalam file tata letak MVC:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

<footer> Perbarui nama aplikasi elemen. Contoh berikut menggunakan nama BlazorHostedaplikasi :

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

Dalam contoh sebelumnya, {DATE} tempat penampung mewakili tanggal hak cipta dalam aplikasi yang dihasilkan dari Razor templat proyek Pages atau MVC.

Untuk membuat tautan Privacy mengarah ke halaman privasi (halamanRazor), tambahkan halaman privasi ke proyek Server.

Pages/Privacy.cshtml Server dalam proyek:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Untuk tampilan privasi berbasis MVC, buat tampilan privasi di proyek Server.

View/Home/Privacy.cshtml Server dalam proyek:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Home Di pengontrol aplikasi MVC, kembalikan tampilan.

Tambahkan kode berikut ke Controllers/HomeController.cs:

public IActionResult Privacy()
{
    return View();
}

Jika Anda mengimpor file dari aplikasi donor, pastikan untuk memperbarui namespace apa pun dalam file agar sesuai Server dengan proyek (misalnya, BlazorHosted.Server).

Impor aset statis ke Server proyek dari folder proyek wwwroot donor:

• wwwroot/css folder dan konten
• wwwroot/js folder dan konten
• wwwroot/lib folder dan konten

Jika proyek donor dibuat dari templat proyek ASP.NET Core dan file tidak dimodifikasi, Anda dapat menyalin seluruh wwwroot folder dari proyek donor ke dalam Server proyek dan menghapus favicon file ikon.

Warning

Hindari menempatkan aset statis ke dalam Client folder dan Serverwwwroot . Jika file yang sama ada di kedua folder, pengecualian dilemparkan karena aset statis berbagi jalur akar web yang sama. Oleh karena itu, host aset statis di salah wwwroot satu folder, bukan keduanya.

Setelah mengadopsi konfigurasi sebelumnya, sematkan Razor komponen ke dalam halaman atau tampilan Server proyek. Gunakan panduan di bagian berikut dari artikel ini:

• Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
• Merender komponen dalam halaman atau tampilan dengan pemilih CSS

Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen

Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, Pembantu Tag Komponen mendukung dua mode render untuk merender komponen dari Blazor WebAssembly aplikasi di halaman atau tampilan:

• WebAssembly
• WebAssemblyPrerendered

Dalam contoh Halaman berikut Razor , Counter komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman. Untuk menghindari penggunaan namespace lengkap untuk Counter komponen dengan Component Tag Helper ({ASSEMBLY NAME}.Pages.Counter), tambahkan @using direktif untuk namespace proyek Pages klien. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client.

Server Dalam proyek, Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Jalankan proyek Server. Navigasi ke Razor halaman di /razorpagescounter1. Komponen yang telah dirender Counter disematkan di halaman.

RenderMode mengonfigurasi apakah komponen:

• Telah diprarender ke dalam halaman.
• Apakah di-render sebagai HTML statis pada halaman atau jika itu mencakup informasi yang diperlukan untuk memulai aplikasi Blazor dari agen pengguna.

Untuk informasi lebih lanjut tentang Component Tag Helper, termasuk penerusan parameter dan konfigurasi RenderMode, lihat Component Tag Helper di ASP.NET Core.

Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts dan lembar gaya ditambahkan ke konten elemen tata letak <head> .

Mengatur konten turunan melalui fragmen render

Pembantu Tag Komponen tidak mendukung penerimaan RenderFragment delegasi untuk konten anak (misalnya, param-ChildContent="..."). Sebaiknya buat Razor komponen (.razor) yang mereferensikan komponen yang ingin Anda render dengan konten anak yang ingin Anda lewati lalu panggil Razor komponen dari halaman atau tampilan.

Pastikan bahwa komponen yang telah dirender tingkat atas tidak dipangkas saat diterbitkan

Jika Pembantu Tag Komponen secara langsung mereferensikan komponen dari pustaka yang tunduk pada pemangkasan penerbitan, komponen mungkin dipangkas selama penerbitan karena tidak ada referensi dari kode aplikasi sisi klien. Akibatnya, komponen tidak dirender sebelumnya, meninggalkan tempat kosong dalam output. Jika ini terjadi, instruksikan pemangkas untuk mempertahankan komponen pustaka dengan menambahkan DynamicDependency atribut ke kelas apa pun di aplikasi sisi klien. Untuk mempertahankan komponen yang disebut SomeLibraryComponentToBePreserved, tambahkan yang berikut ini ke komponen apa pun:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

Pendekatan sebelumnya biasanya tidak diperlukan karena aplikasi biasanya merender komponennya (yang tidak dipangkas), yang pada gilirannya mereferensikan komponen dari pustaka (menyebabkannya juga tidak dipangkas). Hanya gunakan DynamicDependency secara eksplisit untuk merender komponen pustaka secara langsung ketika pustaka tunduk pada pemangkasan.

Merender komponen dalam halaman atau tampilan dengan pemilih CSS

Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, tambahkan komponen root ke Client proyek solusi yang dihosting Blazor WebAssembly dalam Program.cs file. Dalam contoh berikut, Counter komponen dinyatakan sebagai komponen akar dengan pemilih CSS yang memilih elemen dengan id yang cocok counter-component. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client.

Dalam Program.cs file Client proyek, tambahkan namespace layanan untuk komponen proyek Razor ke bagian atas file:

using BlazorHosted.Client.Pages;

builder Setelah ditetapkan dalam Program.cs, tambahkan Counter komponen sebagai komponen akar:

builder.RootComponents.Add<Counter>("#counter-component");

Dalam contoh Halaman berikut Razor , Counter komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman.

Server Dalam proyek, Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Jalankan proyek Server. Navigasi ke Razor halaman di /razorpagescounter2. Komponen yang telah dirender Counter disematkan di halaman.

Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts dan lembar gaya ditambahkan ke konten elemen tata letak <head> .

Note

Contoh sebelumnya melemparkan JSException jika Blazor WebAssembly aplikasi dirender dan diintegrasikan ke dalam Razor Halaman atau aplikasi MVC secara bersamaan dengan penggunaan pemilih CSS. Menavigasi ke salah Client satu komponen proyek Razor atau menavigasi ke halaman atau tampilan Server dengan komponen yang disematkan melempar satu atau beberapa JSException.

Ini adalah perilaku normal karena melakukan prarender dan mengintegrasikan Blazor WebAssembly aplikasi dengan komponen yang dapat dirutekan Razor tidak kompatibel dengan penggunaan pemilih CSS.

Jika Anda telah bekerja dengan contoh di bagian sebelumnya dan hanya ingin melihat pekerjaan pemilih CSS di aplikasi sampel Anda, komentari spesifikasi App komponen Client akar file proyek Program.cs :

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Navigasikan ke halaman atau lihat dengan komponen yang disematkan Razor yang menggunakan pemilih CSS (misalnya, /razorpagescounter2 dari contoh sebelumnya). Halaman atau tampilan dimuat dengan komponen yang disematkan, dan komponen yang disematkan berfungsi seperti yang diharapkan.

Mempertahankan status yang telah dirender sebelumnya

Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama proses perenderan akan hilang dan harus dibuat ulang ketika aplikasi sepenuhnya dimuat. Jika ada status yang diatur secara asinkron, UI mungkin akan berkedip saat UI yang sudah dirender sebelumnya digantikan dengan placeholder sementara, dan kemudian dirender sepenuhnya lagi.

Untuk menyimpan status komponen yang telah dirender sebelumnya, gunakan Persist Component State Tag Helper (sumber referensi). Tambahkan tag dari Pembantu Tag, <persist-component-state />, di dalam tag penutup </body> halaman _Host dalam aplikasi yang melakukan pra-render komponen.

Note

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Ganti cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Di Pages/_Host.cshtml aplikasi Blazor yang telah dirender webAssembly (WebAssemblyPrerendered) di aplikasi yang dihosting Blazor WebAssembly :

<body>
    ...

    <persist-component-state />
</body>

Tentukan status apa yang harus dipertahankan dengan menggunakan layanan PersistentComponentState. PersistentComponentState.RegisterOnPersisting mendaftarkan callback untuk mempertahankan status komponen sebelum aplikasi dihentikan sementara. Status aplikasi diambil kembali ketika aplikasi dilanjutkan. Lakukan panggilan pada akhir dari kode inisialisasi untuk menghindari potensi race condition selama pemadaman aplikasi.

Pada contoh berikut:

• Tempat penampung {TYPE} mewakili jenis data yang akan dipertahankan (misalnya, WeatherForecast[]).
• Placeholder {TOKEN} adalah string pengidentifikasi negara bagian (misalnya, fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Contoh berikut adalah versi komponen yang diperbarui FetchData dalam aplikasi yang dihosting Blazor WebAssembly berdasarkan Blazor templat proyek. Komponen mempertahankan WeatherForecastPreserveState status prakiraan cuaca selama pra-penyajian lalu mengambil status untuk menginisialisasi komponen. Tag Helper Persist Component State mempertahankan status komponen setelah semua pemanggilan komponen.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = await WeatherForecastService.GetForecastAsync(
                DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Dengan menginisialisasi komponen dengan kondisi yang sama seperti yang digunakan selama pra-rendering, setiap langkah inisialisasi yang mahal hanya dieksekusi satu kali. UI yang dirender juga sesuai dengan UI yang dirender sebelumnya, sehingga tidak terjadi kedipan di browser.

Keadaan yang telah dirender sebelumnya disimpan dan ditransfer ke klien, di mana keadaan ini digunakan untuk memulihkan keadaan komponen. Untuk pra-penyajian di aplikasi yang dihosting Blazor WebAssembly , data diekspos ke browser dan tidak boleh berisi informasi privat yang sensitif.

Sumber daya tambahan Blazor WebAssembly

• Dukungan pra-penyajian dengan pemuatan malas rakitan
• Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
  • Inisialisasi komponen (OnInitialized{Async})
  • Setelah render komponen (OnAfterRender{Async})
  • Koneksi ulang stateful setelah pra-penyajian: Meskipun konten di bagian berfokus pada Blazor Server dan SignalR yang stateful, skenario untuk prarendering di aplikasi yang Blazor WebAssembly dihosting (WebAssemblyPrerendered) melibatkan kondisi dan pendekatan serupa untuk mencegah eksekusi kode pengembang dua kali. Untuk mempertahankan status selama eksekusi kode inisialisasi saat melakukan prarender, lihat bagian Mempertahankan status yang telah dirender sebelumnya di artikel ini.
  • Prarendering dengan Interop JavaScript
• Subjek autentikasi dan otorisasi yang berkaitan dengan pra-penyajian
  • Aspek umum
  • Prarendering dengan autentikasi di aplikasi yang dihosting Blazor WebAssembly
• Menghosting dan menyebarkan ASP.NET Core Blazor WebAssembly
• Menangani kesalahan: Pra-penyajian
• OnNavigateAsync dijalankan dua kali saat pra-penyajian: Menangani peristiwa navigasi asinkron dengan OnNavigateAsync