blazor prerender cache

Caché prerender

Cache para usar con Blazor WebAssembly y el prevenimiento del servidor. Preventa/facilita el Flash de interfaz de usuario de doble inicialización.

El problema

Este es un intento de resolver/aliviar el problema, donde el reproducción del servidor Blazor WebAssembly + Server en las páginas puede causar un "Flash UI".

1. La página se representa en el servidor (incluido algún paso Async, como una llamada de base de datos), y la versión estática resultante de la página se envía al navegador.
2. El navegador representa la página estática, lo que lleva a una carga inicial rápida y amigable con SEO.
3. Blazor se está configurando en segundo plano, tirando de .NET y los binarios del marco.
4. La aplicación comienza y reemplaza (parte de) la página estática inicial con la dinámica, del lado del cliente, se presentó.
5. Algunos datos de Async se cargan una vez más, esta vez por el cliente.

El tiempo que lleva obtener los datos por segunda vez es lo que hace que la interfaz de usuario flashee.

El "arreglo"

Esta pieza de código agrega un caché, que se maneja mucho como el ImemoryCache (que es una de las formas sugeridas de resolver este problema en primer lugar).

Sin embargo, en lugar de almacenar el caché en el servidor (eliminando así, por ejemplo, un segundo viaje a la base de datos), el caché se almacena en la página prerenderizada estática.

Luego, cuando la página obtiene una segunda inicialización, el caché se carga desde la página estática y los datos se extraen desde allí. Esto evita el viaje al servidor por completo, eliminando el paso Async y reduciendo/eliminando drásticamente la segunda fase de carga.

Instalación

La biblioteca está disponible como un paquete NUGET para su convienencia, pero es tan pequeño que es preferible copiar los 2 archivos en su proyecto.

1. Prerendercache.cs
2. Prerendercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Uso

1. Registre IperenderCache.

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

2. Incluya el componente PrerenderCachestore en _host.cshtml.

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

Tenga en cuenta que este componente debe agregarse a la parte inferior de la página, por lo que se carga después de todos los otros componentes.

Esto es para evitar que el componente se repite antes de que todos los datos que se encuentran en caché están disponibles en IperenderCache.

3. Obtenga datos sujeto a doble initalización a través de IperenderCache.

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

El primer argumento del método getoradd es la clave de caché, que debe ser única dentro de la página.

Debajo del capó

Puede ver el resultado del caché mirando la fuente de la página:

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