blazor prerender cache

Blazor Prerender Cache

Cache untuk digunakan dengan Blazor WebAssembly dan prerendering server. Mencegah/memudahkan flash UI inisialisasi ganda.

Masalahnya

Ini adalah upaya untuk memecahkan/memudahkan masalah, di mana Blazor WebAssembly + Server prerendering pada halaman dapat menyebabkan "flash UI".

1. Halaman diberikan di server (termasuk beberapa langkah async seperti panggilan database), dan versi statis yang dihasilkan dari halaman dikirim ke browser.
2. Browser membuat halaman statis, yang mengarah ke beban awal yang cepat dan ramah SEO.
3. Blazor sedang diatur di latar belakang, menarik .NET dan biner kerangka kerja.
4. Aplikasi dimulai dan menggantikan (bagian dari) halaman statis awal dengan yang dinamis, sisi klien diberikan.
5. Beberapa data async dimuat sekali lagi, kali ini oleh klien.

Waktu yang dibutuhkan untuk mengambil data untuk kedua kalinya adalah apa yang menyebabkan UI berkedip.

"Perbaikan"

Sepotong kode ini menambahkan cache, yang menangani banyak hal seperti iMemoryCache (yang merupakan salah satu cara yang disarankan untuk menyelesaikan masalah ini di tempat pertama).

Padahal, alih -alih menyimpan cache di server (dengan demikian menghapus misalnya perjalanan kedua ke database), cache disimpan di halaman prerender statis.

Kemudian, ketika halaman mendapat inisialisasi kedua, cache dimuat dari halaman statis dan data ditarik dari sana. Ini mencegah perjalanan ke server sepenuhnya, menghapus langkah async dan secara drastis mengurangi/menghapus fase pemuatan kedua.

Instalasi

Perpustakaan tersedia sebagai paket Nuget untuk Konvienence, tetapi sangat kecil sehingga mungkin lebih baik untuk hanya menyalin 2 file ke dalam proyek Anda.

1. Prerendercache.cs
2. Prerendercachestore.razor

 Install-Package Flyingpie.Blazor.PrerenderCache

Penggunaan

1. Daftarkan iprerendercache.

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

2. Sertakan komponen prerendercachestore di _host.cshtml.

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

Perhatikan bahwa komponen ini harus ditambahkan ke bagian paling bawah halaman, sehingga dimuat setelah semua komponen lainnya.

Ini untuk mencegah komponen dari rendering sebelum semua-menjadi-cacing-data tersedia dari iprerendercache.

3. Ambil data tunduk pada inisialisasi ganda melalui 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 ( ) ) ;
}

Argumen pertama dari metode getoradd adalah kunci cache, yang harus unik dalam halaman.

Di bawah kap mesin

Anda dapat melihat hasil cache dengan melihat sumber halaman:

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