blazor prerender cache

ذاكرة التخزين المؤقت للليزور بريندر

ذاكرة التخزين المؤقت للاستخدام مع Blazor Webassembly و Server Prerendering. يمنع/يخفف من فلاش واجهة المستخدم المزدوجة.

المشكلة

هذه محاولة لحل/تخفيف المشكلة ، حيث يمكن أن يتسبب Prerendering Blazor Webassembly + Server على الصفحات في "فلاش واجهة المستخدم".

1. يتم تقديم الصفحة على الخادم (بما في ذلك بعض الخطوة غير المتزامنة مثل استدعاء قاعدة البيانات) ، ويتم إرسال النسخة الثابتة الناتجة من الصفحة إلى المتصفح.
2. يقوم المتصفح بإعداد الصفحة الثابتة ، مما يؤدي إلى تحميل أولي سريع وصديق لك.
3. يتم إعداد Blazor في الخلفية ، حيث يسحب .NET وثنائيات الإطار.
4. يبدأ التطبيق ويحل محل (جزء من) الصفحة الثابتة الأولية مع واحدة ديناميكية من جانب العميل المقدمة.
5. يتم تحميل بعض بيانات ASYNC مرة أخرى ، هذه المرة من قبل العميل.

الوقت الذي يستغرقه جلب البيانات للمرة الثانية هو ما يسبب وميض واجهة المستخدم.

"الإصلاح"

يضيف قطعة الكود هذه ذاكرة التخزين المؤقت ، والتي تتعامل مع الكثير مثل ImemoryCache (والتي تعد إحدى الطرق المقترحة لحل هذه المشكلة في المقام الأول).

على الرغم من ذلك ، بدلاً من تخزين ذاكرة التخزين المؤقت على الخادم (وبالتالي إزالة الرحلة الثانية إلى قاعدة البيانات) ، يتم تخزين ذاكرة التخزين المؤقت في الصفحة الثابتة.

ثم ، عندما تحصل الصفحة على تهيئة ثانية ، يتم تحميل ذاكرة التخزين المؤقت من الصفحة الثابتة ويتم سحب البيانات من هناك. هذا يمنع الرحلة إلى الخادم تمامًا ، مما يؤدي إلى إزالة خطوة غير متزامنة وتقليل/إزالة مرحلة التحميل الثانية بشكل كبير.

تثبيت

المكتبة متوفرة كحزمة nuget للقافلة ، لكنها صغيرة جدًا لدرجة أنه قد يكون من الأفضل نسخ الملفان في مشروعك.

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 ( ) ) ;
}

الوسيطة الأولى من Metoradd-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 >