Önceden oluştur ASP.NET Core Razor bileşenleri

Bu makalede, s ve Razor uygulamalarda sunucu tarafından işlenen bileşenler için bileşen ön kayıt senaryoları Blazor Web AppaçıklanmaktadırBlazor Server.

Ön kayıt , HTML'yi tarayıcıya mümkün olan en kısa sürede teslim etmek için sunucudan sayfa içeriğini statik olarak işleme işlemidir. Önceden hazırlanan içerik kullanıcıya hızla görüntülendikten sonra, etkin olay işleyicileri olan etkileşimli içerik işlenir ve daha önce işlenen içeriğin yerini alır. Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullandığı ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) da geliştirebilir.

Prerendering, etkileşimli bileşenler için varsayılan olarak etkindir.

Etkileşimli yönlendirmeli iç gezinti, sayfa zaten etkileşimli olduğundan ön kayıt kullanmaz. Daha fazla bilgi için bkz. Statik ve etkileşimli yönlendirme ve Etkileşimli yönlendirme ve ön kayıt.

OnAfterRender{Async} bileşen yaşam döngüsü olayları , yalnızca bileşen etkileşimli olarak işlendiğinde çağrılmaz.

Prerendering'i devre dışı bırakma

Uygulamanın bileşenlerinin iki kez işlenmesi gerektiğinden, prerendering için bir kez ve etkileşim kurmak için bir kez, prerendering bir uygulamayı Razor karmaşıklaştırabilir. Bileşenler WebAssembly üzerinde çalışacak şekilde ayarlandıysa, bileşenlerinizi hem sunucudan hem de istemciden çalıştırılacak şekilde tasarlamanız gerekir.

Bileşen örneği için ön işleme özelliğini devre dışı bırakmak amacıyla, prerender değerine sahip bayrağı işleme moduna iletin false:

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

Bileşen tanımında ön kayıt özelliğini devre dışı bırakmak için:

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

Uygulamanın tamamında ön kayıt özelliğini devre dışı bırakmak için, uygulamanın bileşen hiyerarşisinde kök bileşen olmayan en üst düzey etkileşimli bileşende işleme modunu belirtin.

Proje şablonunu temel alan uygulamalar için, Blazor Web App bileşeninin Routes bileşeninde (App) kullanıldığı yere uygulamanın tamamı için atanmış bir işleme modu belirtilir. Aşağıdaki örnek, uygulamanın işleme modunu Etkileşimli Sunucu olarak ayarlar ve ön kayıt devre dışı bırakılır:

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

Ayrıca, HeadOutlet bileşeni için App bileşeninde önceden işleme özelliğini devre dışı bırakın:

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

Kök bileşen App, kök bileşenin tanım dosyasının en üstündeki @rendermode yönergesi ile etkileşimli hale getirilmesi desteklenmez (.razor). Bu nedenle, prerendering bileşeni tarafından App doğrudan devre dışı bırakılamaz.

Önceki teknikleri kullanarak ön kayıt devre dışı bırakmak yalnızca üst düzey işleme modları için geçerli olur. Eğer bir ebeveyn bileşen bir işleme modu belirtirse, çocuk bileşenlerinin önbelleğe alma ayarları yoksayılır.

** Önceden oluşturulmuş durumu kalıcı hale getirmek

Önceden girilmiş durum kalıcı olmadan, ön kayıt sırasında kullanılan durum kaybolur ve uygulama tamamen yüklendiğinde yeniden oluşturulması gerekir. Herhangi bir durum zaman uyumsuz olarak oluşturulursa, önceden renderlanmış kullanıcı arabirimi bileşen yeniden renderlandığında değiştirildiği için kullanıcı arabirimi titreyebilir. Ön kayıt sırasında durumu kalıcı hale getirmek için bkz. ASP.NET Core Blazor önceden oluşturulmuş durum kalıcılığı.

İstemci tarafı hizmetleri, önceden işlemelerde çözümlenemiyor.

Bir bileşen veya uygulama için ön işleme devre dışı bırakılmadığını varsayarsak, proje içindeki .Client bileşen sunucu üzerinde önceden işlenir. Sunucunun kayıtlı istemci tarafı Blazor hizmetlerine erişimi olmadığından, hizmetin ön kayıt sırasında bulunamadığına ilişkin bir hata almadan bu hizmetleri bir bileşene eklemek mümkün değildir.

Örneğin, Home projesindeki .Client içinde, Blazor Web App bileşenini Genel Etkileşimli WebAssembly veya Etkileşimli Otomatik işleme ile göz önünde bulundurun. Bileşen, ortamın adını almaya çalışmak için IWebAssemblyHostEnvironment enjeksiyon yapmaya çalışır.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

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

Derleme zamanı hatası oluşmaz, ancak ön kayıt sırasında bir çalışma zamanı hatası oluşur:

'BlazorSample.Client.Pages.Home' türünde 'Environment' özelliği için bir değer sağlanamaz. 'Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment' türünde kayıtlı bir hizmet yok.

Bu hata, bileşenin ön kayıt sırasında sunucuda derlenmesi ve yürütülmesi gerektiğinden, ancak IWebAssemblyHostEnvironment sunucuda kayıtlı bir hizmet olmadığından oluşur.

Bu senaryoyu ele almak için aşağıdaki yaklaşımlardan herhangi birini göz önünde bulundurun:

• İstemciye ek olarak hizmeti sunucuya kaydetme
• Uygulamanın ön kayıt sırasında kullanabileceği bir hizmet ekleme
• Hizmeti isteğe bağlı hale getirme
• Hizmet soyutlaması oluşturma
• Bileşen için prerendering'i devre dışı bırakma

İstemciye ek olarak hizmeti sunucuya kaydetme

Hizmet sunucu yürütmeyi destekliyorsa, ön kayıt sırasında kullanılabilir olması için istemciye ek olarak hizmeti sunucuya kaydedin. Bu senaryonun bir örneği için Web HttpClient makalesinin Blazor Web App dış web API'leri bölümündeki hizmetlere yönelik yönergelere bakın.

Uygulamanın ön kayıt sırasında kullanabileceği bir hizmet ekleme

Bazı durumlarda uygulama, ön kayıt sırasında sunucuda bir hizmet ve istemcide farklı bir hizmet kullanabilir.

Örneğin, aşağıdaki kod IHostEnvironment ekleyerek kodun sunucuda mı yoksa istemcide mi çalıştığını fark ederek uygulamanın ortamını elde ederMicrosoft.Extensions.Hosting.Abstractions:

private string? environmentName;

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

Ancak, bu yaklaşım istemci projesine gerekli olmayan ek bir bağımlılık ekler.

Hizmeti isteğe bağlı hale getirme

Ön işleme sırasında gerekli değilse, hizmeti isteğe bağlı hale getirmek için aşağıdaki yaklaşımlardan birini kullanın.

Aşağıdaki örnekte IWebAssemblyHostEnvironment oluşturucu enjeksiyonu kullanılır:

private string? environmentName;

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

Alternatif olarak, varsa isteğe bağlı olarak hizmeti almak için ekleyin IServiceProvider :

@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;
        }
    }
}

Hizmet soyutlaması oluşturma

Sunucuda farklı bir hizmet uygulaması gerekiyorsa, bir hizmet soyutlaması oluşturun ve sunucu ve istemci projelerinde hizmet için uygulamalar oluşturun. Hizmetleri her projeye kaydedin. Özel hizmet soyutlamasını gerektiğinde bileşenlere ekleyin. Ardından, bileşen yalnızca özel hizmet soyutlamasına bağlı hale gelir.

durumunda IWebAssemblyHostEnvironment, yeni bir arabirim oluşturmak yerine mevcut arabirimi yeniden kullanabiliriz:

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;
}

Sunucu projesinin Program dosyasında hizmeti kaydedin:

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

Bu noktada hizmet, IWebAssemblyHostEnvironment.

Bileşen için prerendering'i devre dışı bırakma

Bileşen veya tüm uygulama için ön kayıt özelliğini devre dışı bırakın. Daha fazla bilgi için , Prerendering'i devre dışı bırakma bölümüne bakın.