blazor prerender cache

Cache do Prerender Blazor

Cache para uso com a Blazor WebAssembly e a Prendering Server. Evita/facilita o flash duplo inicialize a interface do usuário.

O problema

Esta é uma tentativa de resolver/aliviar o problema, onde o Blazor WebAssembly + Server Procendering nas páginas pode causar um "flash da interface do usuário".

1. A página é renderizada no servidor (incluindo algumas etapas assíncronas, como uma chamada de banco de dados) e a versão estática resultante da página é enviada ao navegador.
2. O navegador renderiza a página estática, levando a uma carga inicial rápida e amigável para SEO.
3. Blazor está sendo configurado em segundo plano, puxando o .NET e os binários da estrutura.
4. O aplicativo inicia e substitui (parte de) a página estática inicial pela dinâmica, o lado do cliente renderizou uma.
5. Alguns dados assíncronos são carregados mais uma vez, desta vez pelo cliente.

O tempo que leva para buscar os dados pela segunda vez é o que faz com que a interface do usuário pisque.

A "correção"

Este pedaço de código adiciona um cache, que lida muito com o ImemoryCache (que é uma das maneiras sugeridas de resolver esse problema em primeiro lugar).

Embora, em vez de armazenar o cache no servidor (removendo assim, por exemplo, uma segunda viagem ao banco de dados), o cache é armazenado na página estática pré -renderizada.

Então, quando a página obtém uma segunda inicialização, o cache é carregado na página estática e os dados são puxados a partir daí. Isso impede completamente a viagem ao servidor, removendo a etapa assíncrona e reduzindo/removendo drasticamente a segunda fase de carregamento.

Instalação

A biblioteca está disponível como um pacote NUGET para convienência, mas é tão pequeno que pode ser preferível apenas copiar os 2 arquivos em seu projeto.

1. Prendercache.cs
2. PrenderCachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Uso

1. Registre iPrenderCache.

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

2. Inclua o componente PrenderCacheStore em _host.cshtml.

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

Observe que esse componente deve ser adicionado à parte inferior da página, para que seja carregada depois de todos os outros componentes.

Isso é para impedir que o componente renderize antes que todos os dados a serem cacheados estejam disponíveis no iPrenderCache.

3. Buscar dados sujeitos à dupla inicialização através do iPrenderCache.

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

O primeiro argumento do getoradd-method é a chave do cache, que deve ser única na página.

Sob o capô

Você pode ver o resultado do cache olhando para a fonte da 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 >