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 >