blazor prerender cache

Blazor Prerender Cache

Cache für die Verwendung mit Blazor WebAssembly und Server -Vorbereitung. Verhindert/lindert den Double Initialize UI -Blitz.

Das Problem

Dies ist ein Versuch, das Problem zu lösen/zu lockern, bei dem Blazor WebAssembly + Server -Vorbereitung auf Seiten einen "UI -Blitz" verursachen kann.

1. Die Seite wird auf dem Server (einschließlich einiger asynchronisierter Schritt wie einem Datenbankaufruf) und der resultierenden statischen Version der Seite an den Browser gesendet.
2. Der Browser macht die statische Seite und führt zu einer schnellen, seo-freundlichen anfänglichen Last.
3. Blazor wird im Hintergrund eingerichtet, das .NET und die Framework -Binärdateien einzieht.
4. Die App startet und ersetzt (Teil) die anfängliche statische Seite durch die dynamische, clientseitige gerenderte.
5. Einige asynchronisierte Daten werden erneut geladen, diesmal vom Client.

Die Zeit, die zum zweiten Mal benötigt wird, um die Daten zu holen, ist das, was die Benutzeroberfläche zum Blinken bringt.

Das "Fix"

Dieser Code fügt einen Cache hinzu, der dem Imemorycache sehr ähnelt (was eine der vorgeschlagenen Möglichkeiten ist, dieses Problem überhaupt zu lösen).

Anstatt den Cache auf dem Server zu speichern (wodurch z. B. eine zweite Reise zur Datenbank entfernt wird), wird der Cache auf der statischen vorgefertigten Seite gespeichert.

Wenn die Seite dann eine zweite Initialisierung erhält, wird der Cache von der statischen Seite geladen und die Daten werden von dort aus gezogen. Dies verhindert die Reise zum Server vollständig, das Entfernen des asynchronisierten Schritts und die drastische Reduzierung/Entfernung der zweiten Ladephase.

Installation

Die Bibliothek ist als Nuget -Paket für die Verurteilung erhältlich, aber es ist so klein, dass es möglicherweise vorzuziehen ist, die beiden Dateien in Ihr Projekt zu kopieren.

1. Prerendercache.cs
2. Prerendercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Verwendung

1. Registrieren Sie IprerenderCache.

 builder . Services
  . AddScoped < IPrerenderCache , PrerenderCache > ( )
;

2. Fügen Sie die prerenderCachestore -Komponente in _host.cshtml ein.

< component type = " typeof(Flyingpie.Blazor.PrerenderCache.PrerenderCacheStore) " render-mode = " Static " />

Beachten Sie, dass diese Komponente am Ende der Seite hinzugefügt werden muss, sodass sie nach allen anderen Komponenten geladen wird.

Dies soll verhindern, dass die Komponente von IprerenderCache vorhanden ist, bevor alle zugeschnittenen Daten vorhanden sind.

3. Abrufen Sie durch IprerenderCache eine doppelte Initialisierung ab.

 [ Inject ]
public IPrerenderCache Cache { get ; set ; }

protected override async Task OnInitializedAsync ( )
{
  // Original
  // VM = await StashApiClient.GetPostsAsync();

  // Cacheable
  VM = await Cache . GetOrAdd ( nameof ( Articles ) , ( ) => StashApiClient . GetPostsAsync ( ) ) ;
}

Das erste Argument der GetOradd-Methode ist der Cache-Schlüssel, der auf der Seite eindeutig sein muss.

Unter der Motorhaube

Sie können das Ergebnis des Cache sehen, indem Sie sich die Seitenquelle ansehen:

 < script type =" text/javascript " >
  window . prerenderCache = {
    cache : { "Articles" : { "Limit" : 25 , "Offset" : 0 , "Count" : 4 , "Posts" : [ { "Id" : "37af5802-7ea4-4def-b090-5bd4ebf4dabc" , ... } ] } } ,
    load : ( ) => window . prerenderCache . cache
  } ;
</ script >