فعال سازی Pre rendering در بلیزور

چرا باید در پروژه های بیلزور Pre rendering را انجام داد؟

و علاوه بر این، آیا این برای Blazor Client و همچنینBlazor Server صدق می کند؟

یک درخواست به سایت بلیزور بدونprerendering چگونه خواهد بود؟

۱- کاربر ما صفحه ما را بازدید می کند. بنابراین مرورگر ما به آدرس داده شده رفته و فایلindex ما را بارگذاری می کند.

۲- سرور ما اکنون بسته به اینکه از Client یا Server استفاده کنیم، رفتار متفاوتی خواهد داشت:

· کلاینت: فایل blazor.webassembly.js دانلود اسمبلی های برنامه و دات نت را راه اندازی خواهد کرد. سپس کامپایل شده و وب اسمبلی اجرا می‌شود‌

· سرور: فایل blazor.server.js ارتباط signalr بین مرورگر و سرور را ایجاد می‌کند. ارتباطsignalr ورودی ها را به سرور می‌رساند و html جدید را به مرورگر تحویل می‌دهد.

۳- کامپوننت ها رندر خواهند شد و به کلاینت نمایش داده می‌شوند.

در اینجا دو مشکل در بلیزور سرور و کلاینت وجود دارد.

بلیزور کلاینت: در این نسخه از بلیزور قبل از اینکه کاربر بتواند تعاملی با سایت داشته باشد همه‌ی content های سایت باید دانلود شود که این مورد زمان گیر است.

بلیزور سرور: از آنجایی که ما به جاوا اسکریپت و SignalR نیاز داریم، در بهینه سازی وب سایت خود برای موتورهای جستجو مشکل خواهید داشت. آنها اغلب جاوا اسکریپت را اجرا نمی کنند یا باWebSockets مشکل دارند.

راه حل چیست؟

در prerendering همه چیز رندر می‌شود و محتوای یک html استاتیک به سمت کلاینت فرستاده خواهد شد.

در نتیجه:

برای بلیزور کلاینت به این شکل خواهد بود که اطلاعات اولیه سایت به کاربر نمایش داده خواهد شد بدون اینکه نیاز باشد ابتدا مقدار زیادی دانلود انجام شود. همچنین مشکل سایت با موتورهای جستجو حل خواهد شد.

چطور باید prerendering را فعال کرد؟

اینکار به سادگی اضافه کردن تکه کد زیر در بالای فایل _Host.cshtml خواهد بود.

<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

برای بلیزور وب اسمبلی

<component type="typeof(App)" render-mode="ServerPrerendered" />

برای بلیزور سرور

سپس فایل Startup.cs را ادیت کنید تا به جای فایل index.html به _Host مپ شود.

محدودیت های pre rendering:

۱- شما دیگر قادر نیستید بلیزور را به صورت استاتیک فایل ارائه کنید. زیرا pre rendering به فایل razor و فایل razor به دات نت ران تایم نیازمند است.

۲- اگر شما یک کد جاوا اسکرسپت را در OnInit/OnInitAsync صدا بزنید با خطا مواجه خواهید شد. وقتی ازpre rendering استفاده می‌کنید اجرای تمام کد های جاوا اسکریپت باید به متدOnAfterRenderAsync منتقل شود.

این متد فقط یک بار بعد از رندر شدن کامل صفحه صدا زده می‌شود.

در این آدرس Chris Sainty توضیحات خوبی برای فعال کردن Pre rendering ارایه کرده است.

https://dev.to/chrissainty/prerendering-a-client-side-blazor-application-bf6