blazor prerender cache

Кэш Blazor Prerender

Кэш для использования с Blazor Webassembly и Server Prerendering. Предотвращает/ослабляет двойную инициализированную вспышку пользовательского интерфейса.

Проблема

Это попытка решить/облегчить проблему, где Blazor Webassembly + Server Prerendering на страницах может вызвать «вспышку пользовательского интерфейса».

1. Страница отображается на сервере (включая какой -то асинхронный шаг, такой как вызов базы данных), а результирующая статическая версия страницы отправляется в браузер.
2. Браузер отображает статическую страницу, что приводит к быстрой, удобной для SEO начальной нагрузки.
3. Blazor настроен на заднем плане, втягивая .NET и Framework Binary.
4. Приложение запускается и заменяет (часть) начальную статическую страницу на динамическую, визуализированную клиентскую сторону.
5. Некоторые асинхронные данные снова загружаются, на этот раз клиентом.

Время, необходимое для получения данных во второй раз, - это то, что заставляет пользовательский интерфейс вспыхивать.

«Исправление»

Этот кусок кода добавляет кэш, который многое относится к Imemorycache (который является одним из предлагаемых способов решения этой проблемы в первую очередь).

Хотя вместо хранения кэша на сервере (тем самым удаляя, например, вторая поездка в базу данных), кэш сохраняется на статической предварительной странице.

Затем, когда страница получает вторую инициализацию, кэш загружается со статической страницы, а данные получают оттуда. Это полностью предотвращает поездку на сервер, удаляя асинхронный шаг и резко уменьшая/удаляя вторую фазу загрузки.

Установка

Библиотека доступна в виде пакета Nuget для убеждения, но она настолько мала, что предпочтительнее просто скопировать 2 файла в ваш проект.

1. Prerendercache.cs
2. Prerendercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Использование

1. Зарегистрируйте iprerendercache.

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

2. Включите компонент Prerendercachestore в _host.cshtml.

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