blazor prerender cache

Blazor Prerenderキャッシュ

Blazor WebAssemblyおよびサーバープレレンダリングで使用するキャッシュ。 Double Initialize UIフラッシュを防止/容易にします。

問題

これは、ページ上のBlazor WebAssembly + Server Prerenderingが「UIフラッシュ」を引き起こす可能性がある場合、問題を解決/緩和する試みです。

1. ページはサーバーでレンダリングされ（データベース呼び出しなどの一部の非同期ステップを含む）、結果の静的バージョンのページがブラウザに送信されます。
2. ブラウザは静的ページをレンダリングし、高速でSEOに優しい初期負荷につながります。
3. Blazorはバックグラウンドにセッ​​トアップされており、.NETとフレームワークのバイナリを引き込みます。
4. アプリは、初期の静的ページを起動して（一部）、動的なクライアント側のレンダリングされたものに置き換えます。
5. 今回はクライアントによって再びロードされます。

2回目のデータを取得するのにかかる時間は、UIがフラッシュする原因です。

「修正」

このコードはキャッシュを追加します。これは、iMemorycache（そもそもこの問題を解決する提案された方法の1つです）によく似ています。

ただし、キャッシュをサーバーに保存する代わりに（たとえば、データベースへの2回目の旅行を削除します）、キャッシュは静的プレレンダーページに保存されます。

次に、ページが2回目の初期化を取得すると、キャッシュが静的ページからロードされ、そこからデータが引かれます。これにより、サーバーへの旅行が完全に防止され、非同期ステップが削除され、2番目のロードフェーズが大幅に削減/削除されます。

インストール

ライブラリは、ConvienenceのためのNugetパッケージとして利用できますが、2つのファイルをプロジェクトにコピーすることが望ましいほど小さいためです。

1. prerendercache.cs
2. Prerendercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

使用法

1. iprerendercacheを登録します。

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

2. _host.cshtmlにPrerendercachestoreコンポーネントを含めます。

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

このコンポーネントはページの最下部に追加する必要があるため、他のすべてのコンポーネントの後にロードされることに注意してください。

これは、IprerEndercacheからすべてのキャッシュデータが利用できるようになる前に、コンポーネントがレンダリングを防ぐためです。

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

GetOradd-Methodの最初の引数はキャッシュキーです。これは、ページ内で一意でなければなりません。

ボンネットの下

ページを見ると、キャッシュの結果を見ることができます。

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