عنوان:

‫تازه‌های Blazor در NET 10.


نویسنده: وحید نصیری
تاریخ: ۱۴۰۴/۰۸/۲۳ ۱۱:۳۱
آدرس: www.dntips.ir
NET 10. بر روی بهبودهای عملی تمرکز کرده، از جمله مدیریت حالت کامپوننت‌ها، اعتبارسنجی، ناوبری و بهینه‌سازی عملکرد. در ادامه، هر بخش را با جزئیات بررسی می‌کنیم .

حالت پایدار کامپوننت (Persistent Component State)
این یکی از بزرگ‌ترین تغییرات است و مشکل قدیمی "فلش" داده‌ها در پیش‌رندرینگ (prerendering) را حل می‌کند. پیش‌رندرینگ، که به طور پیش‌فرض فعال است، صفحه را سریع‌تر بارگذاری می‌کند و برای SEO مفید است، اما باعث می‌شود کامپوننت دوبار رندر شود: یک بار روی سرور و یک بار روی کلاینت. این امر منجر به فلش داده‌ها می‌شود، جایی که داده‌ها ظاهر می‌شوند، ناپدید می‌شوند و دوباره بارگذاری می‌شوند.
حالا با ویژگی جدید [PersistentState]، می‌توانید داده‌ها را بین رندرها حفظ کنید. این ویژگی داده‌ها را سریال‌سازی کرده و در HTML جاسازی می‌کند، تا در رندر تعاملی دوباره استفاده شود. علاوه بر این، در Blazor Server، وقتی مدار (circuit) کاربر قطع می‌شود (مثلاً به دلیل بی‌فعالیتی)، حالت کامپوننت به حافظه (یا حتی کش خارجی مثل Redis با فعال‌سازی HybridCache) ذخیره می‌شود و هنگام اتصال مجدد، بازیابی می‌شود.
مثال ساده:
[PersistentState(AllowUpdates = true)]  // AllowUpdates برای به‌روزرسانی در ناوبری داخلی
public List<Contact>? Contacts { get; set; }
در متد OnInitializedAsync، داده‌ها را فقط یک بار بارگذاری کنید. اگر می‌خواهید رفتار بازیابی را کنترل کنید، از RestoreBehavior استفاده کنید (مثل SkipLastSnapshot برای جلوگیری از بازیابی آخرین اسنپ‌شات). این ویژگی نه تنها فلش را حذف می‌کند، بلکه درخواست‌های پایگاه داده را نصف می‌کند، که برای اپلیکیشن‌های بزرگ مقیاس‌پذیر بسیار مفید است. اگر اپ شما شامل داشبوردهای داده‌محور است، این تغییر می‌تواند زمان بارگذاری را تا ۵۰ درصد کاهش دهد.

بهبودهای اعتبارسنجی (Validation Improvements)
سیستم اعتبارسنجی Blazor حالا قدرتمندتر شده. دو تغییر اصلی:
  • پشتیبانی از انواع تو در تو (Nested Types): قبلاً، اگر مدل فرم شما شامل شیء تو در تو بود (مثل یک کلاس Contact داخل NewContactForm)، اعتبارسنجی DataAnnotations روی خواص تو در تو کار نمی‌کرد. حالا با ثبت سرویس جدید در Program.cs (builder.Services.AddValidation();) و استفاده از [ValidatableType] روی کلاس اصلی، این مشکل حل می‌شود.
[ValidatableType]
public class NewContactForm
{
    public Contact Contact { get; set; }  // Contact شامل [Required] روی Name و Email
    public string? Honeypot { get; set; }
}
  • اعتبارسنجی برای کل کلاس یا رکورد: حالا می‌توانید ValidationAttribute را برای کل مدل اعمال کنید، نه فقط خواص فردی. مثلاً برای تشخیص رفتار ربات‌مانند (با فیلد honeypot).
مثال:
[NoBot]  // یک ValidationAttribute سفارشی
[ValidatableType]
public class NewContactForm { ... }
این بهبودها امنیت فرم‌ها را افزایش می‌دهند، مثلاً در برابر حملات اسپم. اگر از Blazor برای اپ‌های عمومی استفاده می‌کنید، حتماً این ویژگی را تست کنید تا از اعتبارسنجی سمت سرور و کلاینت همزمان بهره ببرید.

بهبودهای ناوبری (Nav Improvements)
ناوبری حالا هوشمندتر و انعطاف‌پذیرتر است:
  • صفحه ۴۰۴ سفارشی: با ویژگی جدید NotFoundPage در Router، می‌توانید کامپوننت جداگانه‌ای برای صفحه "پیدا نشد" تعریف کنید، بدون شلوغ کردن Routes.razor.
مثال:
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">...</Found>
</Router>
در Program.cs هم app.UseStatusCodePagesWithReExecute("/not-found", true); اضافه کنید.
  • تطبیق هوشمند NavLink: حالا NavLink کوئری‌استرینگ را نادیده می‌گیرد و می‌توانید منطق سفارشی بنویسید.
مثال سفارشی:
public class ContactsNavLink : NavLink
{
    protected override bool ShouldMatch(string uriAbsolute)
    {
        return uriAbsolute.Contains("/contacts");
    }
}
این تغییرات ناوبری را برای اپ‌های SPA (Single Page Application) روان‌تر می‌کند و مشکلات رایج مثل ریست موقعیت اسکرول را حل می‌کند.

مودال اتصال مجدد سفارشی (Customizable Reconnection Modal)
در Blazor Server، مودال پیش‌فرض اتصال مجدد حالا قابل سفارشی‌سازی است. فایل‌های آن (ReconnectModal.razor، CSS و JS) در پروژه جدید اضافه می‌شوند و می‌توانید آن را در App.razor رندر کنید.

APIهای جدید برای کنترل اتصالات Blazor Server
با JavaScript جدید، می‌توانید مدارها را pause و resume کنید، مثلاً وقتی کاربر تب را عوض می‌کند.
مثال:
document.addEventListener('visibilitychange', () => {
    if (document.hidden) Blazor.pauseCircuit();
    else Blazor.resumeCircuit();
});
این ویژگی مصرف منابع سرور را کاهش می‌دهد.

اثر انگشتی و فشرده‌سازی اسکریپت‌های Blazor (Fingerprinted and Compressed Blazor Scripts)
اسکریپت‌های Blazor حالا فشرده (تا ۷۶ درصد کوچکتر) و اثر انگشتی (برای جلوگیری از کشینگ قدیمی) هستند. برای WASM، از true در csproj استفاده کنید.

معیارهای جدید برای Blazor (New Metrics)
معیارهای جدیدی برای کامپوننت‌ها، lifecycle و مدارها اضافه شده. با Aspire می‌توانید آن‌ها را ببینید. مثال ثبت در Program.cs:
builder.Services.AddOpenTelemetry().WithMetrics(metrics => {
    metrics.AddMeter("Microsoft.AspNetCore.Components");
    // و غیره
});

بهبودهای Blazor WebAssembly (WASM)
برای WASM، بارگذاری اولیه حالا سریع‌تر است: فشرده‌سازی ۷۰ درصدی، پیش‌بارگذاری موازی با ، حذف blazor.boot.json و پشتیبانی از باندلرهای JS مثل webpack. همچنین ابزارهای پروفایلینگ جدید برای دیباگینگ. این تغییرات WASM را برای اپ‌های عمومی مناسب‌تر می‌کند. قبلاً بارگذاری کند یک نقطه ضعف بود، اما حالا می‌توانید اپ‌های مشتری‌محور را با اطمینان بسازید.

سایر بهبودها
  • نمونه‌های امنیتی جدید
  • تشخیص برنامه‌ای ۴۰۴
  • ویژگی‌های جدید JS Interop (مثل سازنده کلاس JS)
  • گزینه غیرفعال کردن استثناهای ناوبری در رندر استاتیک
  • عدم ریست اسکرول در ناوبری به همان صفحه



مشاهده مطلب اصلی