blazor prerender cache

แคช Prerender Blazor

แคชสำหรับใช้กับ Blazor WebAssembly และ Server Prerendering ป้องกัน/ลดการเริ่มต้น UI Flash สองครั้ง

ปัญหา

นี่คือความพยายามที่จะแก้/บรรเทาปัญหาที่ Blazor WebAssembly + เซิร์ฟเวอร์การทำล่วงหน้าบนหน้าเว็บอาจทำให้ "UI Flash"

1. เพจจะแสดงผลบนเซิร์ฟเวอร์ (รวมถึงขั้นตอน Async บางอย่างเช่นการเรียกฐานข้อมูล) และเวอร์ชันคงที่ผลลัพธ์ของหน้าจะถูกส่งไปยังเบราว์เซอร์
2. เบราว์เซอร์ทำให้หน้าคงที่ซึ่งนำไปสู่การโหลดเริ่มต้นที่รวดเร็วและเป็นมิตรกับ SEO
3. Blazor กำลังถูกตั้งค่าในพื้นหลังดึง. NET และ Framework Binaries
4. แอพเริ่มต้นและแทนที่ (ส่วนหนึ่งของ) หน้าคงที่เริ่มต้นด้วยการแสดงผลฝั่งไคลเอ็นต์แบบไดนามิก
5. ข้อมูล async บางตัวได้รับการโหลดอีกครั้งคราวนี้โดยลูกค้า

เวลาที่ใช้ในการดึงข้อมูลเป็นครั้งที่สองคือสิ่งที่ทำให้ UI แฟลช

"แก้ไข"

รหัสชิ้นนี้เพิ่มแคชที่จัดการกับ ImemoryCache (ซึ่งเป็นหนึ่งในวิธีที่แนะนำในการแก้ปัญหานี้ตั้งแต่แรก)

แม้ว่าแทนที่จะเก็บแคชไว้บนเซิร์ฟเวอร์ (ดังนั้นการลบเช่นการเดินทางครั้งที่สองไปยังฐานข้อมูล) แคชจะถูกเก็บไว้ในหน้าแบบคงที่

จากนั้นเมื่อหน้าได้รับการเริ่มต้นครั้งที่สองแคชจะถูกโหลดจากหน้าคงที่และข้อมูลจะถูกดึงจากที่นั่น สิ่งนี้จะช่วยป้องกันการเดินทางไปยังเซิร์ฟเวอร์โดยสิ้นเชิงลบขั้นตอน Async และลด/ลบขั้นตอนการโหลดครั้งที่สองอย่างมาก

การติดตั้ง

ห้องสมุดมีให้บริการเป็นแพ็คเกจ 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 >