blazor prerender cache

大餐Prerender緩存

緩存，可與Ellazor WebAssembly和服務器預處理一起使用。防止/簡化雙初始化UI閃光燈。

問題

這是一種嘗試解決/減輕問題的嘗試，在頁面上的Ellazor WebAssembly +服務器預處理可能會導致“ UI Flash”。

1. 頁面在服務器上呈現（包括一些異步步驟，例如數據庫調用），並且該頁面的靜態版本發送到瀏覽器。
2. 瀏覽器呈現靜態頁面，導致快速，對SEO友好的初始負載。
3. 在後台設置了大火，將.NET和框架二進制組合。
4. 該應用程序啟動並替換了（一部分）初始靜態頁面，並用動態的客戶端渲染啟動。
5. 某些異步數據再次被客戶端加載。

第二次獲取數據所需的時間是導致UI閃爍的原因。

“修復”

該代碼添加了一個緩存，該緩存處理很像ImeMoryCache（這是首先解決此問題的建議方法之一）。

但是，與其將緩存存儲在服務器上（例如，刪除數據庫的第二次旅行），而是存儲在靜態PRERENDERED頁面中。

然後，當頁面獲得第二個初始化時，將從靜態頁面加載緩存，並從那裡提取數據。這樣可以完全防止到服務器的行程，從而刪除異步步驟並大大減少/刪除第二個加載階段。

安裝

該庫可作為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 >