blazor prerender cache

Cache de prérenrendeur de blazor

Cache pour une utilisation avec Blazor WebAssembly et Prérenfication du serveur. Empêche / assouplit le double flash d'interface utilisateur.

Le problème

Il s'agit d'une tentative de résoudre / soulager le problème, où la prétention de Blazor WebAssembly + Server sur les pages peut provoquer un "flash d'interface utilisateur".

1. La page est rendue sur le serveur (y compris une étape asynchrone telle qu'un appel de base de données), et la version statique résultante de la page est envoyée au navigateur.
2. Le navigateur rend la page statique, conduisant à une charge initiale rapide et conviviale.
3. Blazor est mis en place en arrière-plan, tirant .t .net et les binaires du framework.
4. L'application démarre et remplace (partie de) la page statique initiale avec la dynamique, le côté client rendu.
5. Certaines données asynchrones sont à nouveau chargées, cette fois par le client.

Le temps nécessaire pour récupérer les données pour la deuxième fois est ce qui provoque un clignotement de l'interface utilisateur.

Le "correctif"

Ce morceau de code ajoute un cache, qui gère beaucoup comme l'iMemoryCache (qui est l'une des façons suggérées de résoudre ce problème en premier lieu).

Bien que, au lieu de stocker le cache sur le serveur (supprimant ainsi par exemple. Un deuxième voyage dans la base de données), le cache est stocké dans la page statique prépendée.

Ensuite, lorsque la page obtient une deuxième initialisation, le cache est chargé à partir de la page statique et les données sont tirées à partir de là. Cela empêche le voyage vers le serveur entièrement, en supprimant l'étape asynchrone et en réduisant / supprimant considérablement la deuxième phase de chargement.

Installation

La bibliothèque est disponible en tant que package NuGet pour la convient, mais il est si petit qu'il pourrait préférer de simplement copier les 2 fichiers dans votre projet.

1. Prerendercache.cs
2. Prérencercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Usage

1. Enregistrez IPrerenderCache.

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

2. Incluez le composant PrerenderCachestore dans _host.cshtml.

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

Notez que ce composant doit être ajouté au bas de la page, il est donc chargé après tous les autres composants.

Il s'agit d'empêcher le composant de rendu avant que tous les données à to-cache ne soient disponibles dans iPrerenderCache.

3. Remplissez les données soumises à la double initialisation via iPrerenderCache.

 [ 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 ( ) ) ;
}

Le premier argument de la méthode GetorAdd est la clé de cache, qui doit être unique dans la page.

Sous le capot

Vous pouvez voir le résultat du cache en regardant la source de la page:

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