Prarender komponen ASP.NET Core Razor

Artikel ini menjelaskan Razor skenario pra-penyajian komponen untuk komponen yang dirender server di Blazor Web Apps dan Blazor Server aplikasi.

Pra-penyajian adalah proses penyajian konten halaman secara statis dari server untuk mengirimkan HTML ke browser secepat mungkin. Setelah konten yang telah dirender ditampilkan dengan cepat kepada pengguna, konten interaktif dengan penanganan aktivitas aktif dirender, menggantikan konten apa pun yang dirender sebelumnya. Pra-penyajian juga dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang digunakan mesin pencari untuk menghitung peringkat halaman.

Prarendering diaktifkan secara default untuk komponen interaktif.

Navigasi internal dengan perutean interaktif tidak menggunakan pra-penyajian karena halaman sudah interaktif. Untuk informasi selengkapnya, lihat Perutean statis versus interaktif dan perutean dan prarender interaktif.

OnAfterRender{Async} peristiwa siklus hidup komponen tidak dipanggil saat pra-penyajian, hanya setelah komponen dirender secara interaktif.

Menonaktifkan pra-penyajian

Pra-penyajian dapat mempersulit aplikasi karena komponen aplikasi Razor harus dirender dua kali: sekali untuk prarender dan sekali untuk menyiapkan interaktivitas. Jika komponen disiapkan untuk berjalan di WebAssembly, maka Anda juga harus merancang komponen Anda sehingga dapat berjalan dari server dan klien.

Untuk menonaktifkan prarendering untuk instans komponen, berikan prerender bendera dengan nilai false ke mode render.

• <... @rendermode="new InteractiveServerRenderMode(prerender: false)" />
• <... @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
• <... @rendermode="new InteractiveAutoRenderMode(prerender: false)" />

Untuk menonaktifkan prarendering di dalam definisi komponen:

• @rendermode @(new InteractiveServerRenderMode(prerender: false))
• @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
• @rendermode @(new InteractiveAutoRenderMode(prerender: false))

Untuk menonaktifkan pra-penyajian untuk seluruh aplikasi, tunjukkan mode render pada komponen interaktif tingkat tertinggi dalam hierarki komponen aplikasi yang bukan komponen akar.

Untuk aplikasi yang didasarkan pada templat proyek Blazor Web App, mode render yang berlaku untuk seluruh aplikasi ditentukan ketika komponen Routes digunakan dalam komponen App (Components/App.razor). Contoh berikut mengatur mode render aplikasi ke Interactive Server dengan prarender dinonaktifkan:

<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Juga, nonaktifkan prarender untuk HeadOutlet komponen di dalam komponen App.

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Membuat komponen root, seperti komponen App, menjadi interaktif dengan direktif @rendermode pada bagian awal file definisi komponen root (.razor) tidak didukung. Oleh karena itu, prarender tidak dapat dinonaktifkan secara langsung oleh komponen App.

Menonaktifkan pra-penyajian menggunakan teknik sebelumnya hanya berlaku untuk mode render tingkat atas. Jika komponen induk menentukan mode render, pengaturan prapenggambaran anaknya diabaikan.

Mempertahankan status yang telah dirender sebelumnya

Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama pra-penyajian hilang dan harus dibuat ulang saat aplikasi dimuat sepenuhnya. Jika ada keadaan yang dibuat secara asinkron, UI dapat berkedip karena UI yang sudah dirender sebelumnya diganti saat komponen dirender ulang. Untuk panduan tentang cara mempertahankan status selama pra-penyajian, lihat ASP.NET Persistensi status yang dirender IntiBlazor.

Layanan sisi klien gagal diselesaikan selama pra-penyajian

Dengan asumsi bahwa prapemrosesan tidak dinonaktifkan untuk komponen atau untuk aplikasi, sebuah komponen dalam proyek .Client diprasajikan di server. Karena server tidak memiliki akses ke layanan sisi Blazor klien terdaftar, tidak dapat menyuntikkan layanan ini ke dalam komponen tanpa menerima kesalahan bahwa layanan tidak dapat ditemukan selama prerendering.

Misalnya, pertimbangkan komponen Home berikut dalam proyek .Client di Blazor Web App dengan Interactive WebAssembly atau Interactive Auto rendering global. Komponen mencoba menyuntikkan IWebAssemblyHostEnvironment untuk mendapatkan nama lingkungan.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    Environment: @Environment.Environment
</p>

Tidak terjadi kesalahan waktu kompilasi, tetapi terjadi kesalahan runtime selama pra-penyajian:

Tidak dapat memberikan nilai untuk properti 'Lingkungan' pada jenis 'BlazorSample.Client.Pages.Home'. Tidak ada layanan terdaftar jenis 'Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment'.

Kesalahan ini terjadi karena komponen harus mengkompilasi dan menjalankan pada server selama pra-penyajian, tetapi IWebAssemblyHostEnvironment bukan layanan terdaftar di server.

Pertimbangkan salah satu pendekatan berikut untuk mengatasi skenario ini:

• Daftarkan layanan di server selain klien
• Menyuntikkan layanan yang dapat digunakan aplikasi selama prarendering
• Jadikan layanan opsional
• Membuat abstraksi layanan
• Menonaktifkan pra-rendering untuk komponen

Daftarkan layanan di server selain klien

Jika layanan mendukung eksekusi server, daftarkan layanan di server selain klien sehingga tersedia selama pra-penyajian. Untuk contoh skenario ini, lihat panduan untuk HttpClient layanan di bagian Blazor Web App API web eksternal dari artikel Panggil API web .

Menyuntikkan layanan yang dapat digunakan aplikasi selama pra-penyajian

Dalam beberapa kasus, aplikasi dapat menggunakan layanan di server selama prarender dan layanan yang berbeda pada klien.

Misalnya, kode berikut mendapatkan lingkungan aplikasi apakah kode berjalan di server atau pada klien dengan menyuntikkan IHostEnvironment dari Microsoft.Extensions.Hosting.Abstractions paket NuGet:

private string? environmentName;

public Home(IHostEnvironment? serverEnvironment = null, 
    IWebAssemblyHostEnvironment? wasmEnvironment = null)
{
    environmentName = serverEnvironment?.EnvironmentName;
    environmentName ??= wasmEnvironment?.Environment;
}

Namun, pendekatan ini menambahkan dependensi tambahan ke proyek klien yang tidak diperlukan.

Jadikan layanan opsional

Jadikan layanan opsional jika tidak diperlukan selama pra-penyajian menggunakan salah satu pendekatan berikut.

Contoh berikut menggunakan injeksi konstruktor dari IWebAssemblyHostEnvironment:

private string? environmentName;

public Home(IWebAssemblyHostEnvironment? env = null)
{
    environmentName = env?.Environment;
}

Atau, masukkan IServiceProvider untuk mendapatkan layanan secara opsional jika tersedia:

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IServiceProvider Services

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    <b>Environment:</b> @environmentName
</p>

@code {
    private string? environmentName;

    protected override void OnInitialized()
    {
        if (Services.GetService<IWebAssemblyHostEnvironment>() is { } env)
        {
            environmentName = env.Environment;
        }
    }
}

Membuat abstraksi layanan

Jika implementasi layanan yang berbeda diperlukan di server, buat abstraksi layanan dan buat implementasi untuk layanan di server dan proyek klien. Daftarkan layanan di setiap proyek. Masukkan abstraksi layanan kustom ke dalam komponen jika diperlukan. Komponen kemudian hanya bergantung pada abstraksi layanan kustom.

Dalam kasus IWebAssemblyHostEnvironment, kita dapat menggunakan kembali antarmuka yang ada alih-alih membuat yang baru:

ServerHostEnvironment.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Components;

public class ServerHostEnvironment(IWebHostEnvironment env, NavigationManager nav) : 
    IWebAssemblyHostEnvironment
{
    public string Environment => env.EnvironmentName;
    public string BaseAddress => nav.BaseUri;
}

Dalam file proyek Program server, daftarkan layanan:

builder.Services.TryAddScoped<IWebAssemblyHostEnvironment, ServerHostEnvironment>();

Pada titik ini, IWebAssemblyHostEnvironment layanan dapat disuntikkan ke dalam komponen WebAssembly atau Auto interaktif yang juga telah prarender dari server.

Menonaktifkan prarendering untuk komponen

Nonaktifkan pra-penyajian untuk komponen atau untuk seluruh aplikasi. Untuk informasi selengkapnya, lihat bagian Nonaktifkan prarendering.