Prerender ASP.NET Core Razor bileşenleri

  • Makale

Bu makalede, s içindeki Blazor Web Appsunucu tarafından işlenen bileşenler için bileşen ön kayıt senaryoları açıklanmaktadırRazor.

Ön kayıt , işlenen denetimler için olay işleyicilerini etkinleştirmeden başlangıçta sunucudaki sayfa içeriğini işleme işlemidir. Sunucu, uygulamanın kullanıcılara daha duyarlı hissetmesini sağlayan ilk isteğe yanıt olarak sayfanın HTML kullanıcı arabirimini mümkün olan en kısa sürede verir. Ö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.

Önceden girilmiş durumu kalıcı hale

Ö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, bileşen yeniden başlatıldığında önceden yenilenen kullanıcı arabirimi değiştirildiğinde kullanıcı arabirimi titreyebilir.

Aşağıdaki PrerenderedCounter1 sayaç bileşenini göz önünde bulundurun. Bileşen, yaşam döngüsü yönteminde OnInitializedön kayıt sırasında ilk rastgele sayaç değerini ayarlar. İstemciye SignalR bağlantı kurulduktan sonra bileşen yeniden başlatılır ve ikinci kez yürütülürken OnInitialized ilk sayı değeri değiştirilir.

PrerenderedCounter1.razor:

@page "/prerendered-counter-1"
@rendermode @(new InteractiveServerRenderMode(prerender: true))
@inject ILogger<PrerenderedCounter1> Logger

<PageTitle>Prerendered Counter 1</PageTitle>

<h1>Prerendered Counter 1</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;

    protected override void OnInitialized()
    {
        currentCount = Random.Shared.Next(100);
        Logger.LogInformation("currentCount set to {Count}", currentCount);
    }

    private void IncrementCount() => currentCount++;
}

Uygulamayı çalıştırın ve bileşenden günlüğe kaydetmeyi inceleyin. Aşağıda örnek çıkış verilmiştir.

Not

Uygulama etkileşimli (gelişmiş) yönlendirmeyi benimsediyse ve sayfaya bir iç gezinti yoluyla ulaşılırsa, ön kayıt gerçekleşmez. Bu nedenle, aşağıdaki çıkışı görmek için bileşenin PrerenderedCounter1 tam sayfa yeniden yüklemesini gerçekleştirmeniz gerekir.

info: BlazorSample.Components.Pages.PrerenderedCounter1[0]
currentCount set to 41
info: BlazorSample.Components.Pages.PrerenderedCounter1[0]
currentCount set to 92

İlk günlüğe kaydedilen sayı, ön kayıt sırasında gerçekleşir. Bileşen yeniden yenilendiğinde, ön kayıt sonrasında sayı yeniden ayarlanır. Ayrıca, sayı 41'den 92'ye güncelleştirildiğinde kullanıcı arabiriminde bir titreşim de vardır.

Ön kayıt sırasında sayacın ilk değerini korumak için, Blazor hizmeti kullanarak PersistentComponentState önceden oluşturulmuş bir sayfada kalıcı durumu destekler (ve Sayfalar veya MVC uygulamalarının Razor sayfalarına veya görünümlerine eklenmiş bileşenler için, Kalıcı Bileşen Durum Etiketi Yardımcısı).

Önceden oluşturulmuş durumu korumak için, hizmeti kullanarak PersistentComponentState hangi durumun kalıcı hale dönüştürüleceğine karar verin. PersistentComponentState.RegisterOnPersisting uygulama duraklatmadan önce bileşen durumunu kalıcı hale getirmek için bir geri çağırma kaydeder. Uygulama devam ettiğinde durum alınır.

Aşağıdaki örnekte genel desen gösterilmektedir:

  • Yer tutucu, {TYPE} kalıcı olacak veri türünü temsil eder.
  • Yer {TOKEN} tutucu bir durum tanımlayıcı dizesidir. yer tutucunun {VARIABLE} durumu tutan değişkenin adı olduğu değerini kullanmayı nameof({VARIABLE})göz önünde bulundurun. nameof() Durum tanımlayıcısı için kullanılması, tırnak içine alınmış bir dizenin kullanılmasını önler.
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

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

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

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

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

        return Task.CompletedTask;
    }

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

Aşağıdaki sayaç bileşeni örneği, ön kayıt sırasında sayaç durumunu kalıcı hale getirir ve bileşeni başlatmak için durumu alır.

PrerenderedCounter2.razor:

@page "/prerendered-counter-2"
@implements IDisposable
@inject ILogger<PrerenderedCounter2> Logger
@inject PersistentComponentState ApplicationState

<PageTitle>Prerendered Counter 2</PageTitle>

<h1>Prerendered Counter 2</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override void OnInitialized()
    {
        persistingSubscription =
            ApplicationState.RegisterOnPersisting(PersistCount);

        if (!ApplicationState.TryTakeFromJson<int>(
            nameof(currentCount), out var restoredCount))
        {
            currentCount = Random.Shared.Next(100);
            Logger.LogInformation("currentCount set to {Count}", currentCount);
        }
        else
        {
            currentCount = restoredCount!;
            Logger.LogInformation("currentCount restored to {Count}", currentCount);
        }
    }

    private Task PersistCount()
    {
        ApplicationState.PersistAsJson(nameof(currentCount), currentCount);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose() => persistingSubscription.Dispose();

    private void IncrementCount() => currentCount++;
}

Bileşen yürütürken, currentCount ön kayıt sırasında yalnızca bir kez ayarlanır. Bileşen yeniden başlatıldığında değer geri yüklenir. Aşağıda örnek çıkış verilmiştir.

Not

Uygulama etkileşimli yönlendirmeyi benimserse ve sayfaya bir iç gezinti yoluyla ulaşılırsa, ön kayıt gerçekleşmez. Bu nedenle, aşağıdaki çıkışı görmek için bileşenin PrerenderedCounter2 tam sayfa yeniden yüklemesini gerçekleştirmeniz gerekir.

info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount set to 96
info: BlazorSample.Components.Pages.PrerenderedCounter2[0]
currentCount restored to 96

Ön kayıt sırasında kullanılan durumla aynı duruma sahip bileşenleri başlatarak, pahalı başlatma adımları yalnızca bir kez yürütülür. İşlenen kullanıcı arabirimi önceden oluşturulmuş kullanıcı arabirimiyle de eşleşir, bu nedenle tarayıcıda titreme olmaz.

Kalıcı önceden alınan durum, bileşen durumunu geri yüklemek için kullanıldığı istemciye aktarılır. İstemci tarafı işleme (CSR, InteractiveWebAssembly) sırasında veriler tarayıcıya sunulur ve hassas, özel bilgiler içermemelidir. Etkileşimli sunucu tarafı işleme sırasında (etkileşimli SSR, InteractiveServer), ASP.NET Core Data Protection verilerin güvenli bir şekilde aktarılmasını sağlar. İşleme InteractiveAuto modu WebAssembly ve Sunucu etkileşimini birleştirir, bu nedenle CSR örneğinde olduğu gibi verilerin tarayıcıya açık olmasını göz önünde bulundurmanız gerekir.

Sayfalara ve görünümlere eklenmiş bileşenler (Razor Sayfalar/MVC)

Sayfalar veya MVC uygulamasının Razor bir sayfasına veya görünümüne eklenmiş bileşenler için, uygulamanın düzeninin kapanış </body> etiketine HTML etiketiyle Kalıcı <persist-component-state /> Bileşen Durum Etiketi Yardımcısı'nı eklemeniz gerekir. Bu yalnızca Sayfalar ve MVC uygulamaları için Razor gereklidir. Daha fazla bilgi için bkz . ASP.NET Core'da Kalıcı Bileşen Durum Etiketi Yardımcısı.

Pages/Shared/_Layout.cshtml:

<body>
    ...

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

Etkileşimli yönlendirme ve ön kayıt

Etkileşimli yönlendirme için iç gezinti, sunucudan yeni sayfa içeriği istemeyi içermez. Bu nedenle, iç sayfa istekleri için ön kayıt gerçekleşmez.

Hizmet PersistentComponentState yalnızca ilk sayfa yüklemesinde çalışır ve gelişmiş sayfa gezinti olaylarında çalışmaz. Uygulama, kalıcı bileşen durumunu kullanan bir sayfada tam (gelişmiş olmayan) bir gezinti gerçekleştirirse, kalıcı durum uygulamanın etkileşimli hale geldiğinde kullanması için kullanılabilir hale gelir. Ancak etkileşimli bir bağlantı hattı önceden oluşturulmuşsa ve kalıcı bileşen durumunu işleyen bir sayfada gelişmiş bir gezinti gerçekleştiriliyorsa, bu durum mevcut bağlantı hattında kullanılabilir duruma getirilmez. Hizmet PersistentComponentState gelişmiş gezintinin farkında değildir ve zaten çalışmakta olan bileşenlere durum güncelleştirmeleri sunmak için bir mekanizma yoktur.

Prerendering kılavuzu

Ön kayıt kılavuzu, belgelerde konu başlığına Blazor göre düzenlenmiştir. Aşağıdaki bağlantılar, konuya göre ayarlanan belgelerde yer alan tüm ön kayıt kılavuzlarını kapsar: