استریم رندرینگ در Blazor: تجربه وب سریع‌تر در Blazor

تا حالا پیش اومده که در پروژه‌تون صفحه‌ای تا زمان لود کامل داده‌ها هیچ محتوایی نمایش نده و کاربر تصور کنه برنامه فریز شده؟ این دقیقاً جاییه که استریم رندرینگ وارد عمل می‌شه! راه‌حل شما Stream-Rendering است! این قابلیت جدید که در دات‌نت ۸ به بعد به Blazor اضافه شده، تجربه کاربری روان‌تری را برای وب‌سایت شما فراهم می‌کند و به کاربران حس بهتری می‌دهد.

استریم رندرینگ چیست؟

استریم رندرینگ به شما اجازه می‌دهد تا بخش‌های مختلف یک صفحه وب را به صورت مرحله‌ای و جریان‌وار (Stream) برای کاربر ارسال کنید. به جای اینکه کاربر مجبور باشد تا آماده شدن کامل تمام محتوای صفحه منتظر بماند، بلافاصله پس از کلیک، بخش‌های آماده و ساختار کلی صفحه (مثل اسکلت یا یک Placeholder) به او نمایش داده می‌شود و سپس داده‌های اصلی به محض آماده شدن، جایگزین آن می‌شوند.

چرا به استریم رندرینگ نیاز داریم؟

تصور کنید کاربر برای مشاهده اطلاعاتی روی یک لینک کلیک می‌کند، اما این اطلاعات باید از یک پایگاه داده یا API خارجی دریافت شوند. این فرایند ممکن است چند صد میلی‌ثانیه یا حتی چند ثانیه زمان ببرد. در حالت عادی، کاربر در این مدت با یک صفحه خالی یا یک صفحه کاملاً فریز شده روبرو می‌شود. استریم رندرینگ با حل این مشکل، به کاربر می‌فهماند که در حال دریافت داده هستیم و قرار نیست بی‌دلیل منتظر بماند.

مثال واقعی: سایت دیوار

برای درک بهتر این مفهوم، سایت دیوار را در نظر بگیرید. وقتی سرعت اینترنت را کم می‌کنیم و صفحه را به پایین اسکرول می‌کنیم، متوجه می‌شویم که آگهی‌ها به یکباره لود نمی‌شوند. در ابتدا، یک ساختار آماده (شبیه به یک کادر خالی) به نمایش در می‌آید و سپس عکس‌ها و متن آگهی به صورت تدریجی لود و نمایش داده می‌شوند. این همان placeholder است که به کاربر می‌گوید: دیتای اصلی در راه است، لطفاً کمی صبر کنید. استریم رندرینگ دقیقاً همین کار را برای شما در Blazor انجام می‌دهد.

پیاده‌سازی استریم رندرینگ در Blazor Server

پیاده‌سازی استریم رندرینگ در Blazor بسیار ساده است. کافیست Attribute [StreamRendering] را به کامپوننت خود اضافه کنید. در ادامه، یک کامپوننت پیش‌ساخته‌ی آب‌وهوا (Weather) در Blazor را بررسی می‌کنیم.

کد کامپوننت Weather

@page "/weather"
@attribute [StreamRendering]

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>این کامپوننت نحوه نمایش داده‌ها را نمایش می‌دهد.</p>

@if (forecasts == null)
{
    <p><em>در حال بارگذاری...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>تاریخ</th>
                <th>دما (سانتی‌گراد)</th>
                <th>دما (فارنهایت)</th>
                <th>وضعیت</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        // شبیه‌سازی تأخیر در دریافت داده از یک API
        await Task.Delay(2000); 
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }
}

در این کد:

Attribute [StreamRendering]: این خط به Blazor می‌گوید که این صفحه باید از قابلیت استریم رندرینگ استفاده کند.

دستور شرطی @if (forecasts == null): در ابتدا، متغیر forecasts مقدار null دارد. بنابراین، متن "در حال بارگذاری..." (Loading) به کاربر نمایش داده می‌شود. 

 جایگزینی داده‌ها: پس از گذشت ۲ ثانیه (که تأخیر عمدی برای شبیه‌سازی تأخیر API است)، داده‌ها دریافت می‌شوند و متغیر forecasts از null خارج می‌شود. در این لحظه، Blazor به صورت خودکار محتوای if را با محتوای else (جدول آب و هوا) جایگزین می‌کند.

تفاوت با رندرینگ عادی

برای درک بهتر، بیایید Attribute [StreamRendering] را حذف کنیم و مجدداً برنامه را اجرا کنیم.

در این حالت، زمانی که روی منوی مربوط به صفحه آب‌وهوا کلیک می‌کنید، کل صفحه برای ۲ ثانیه (مدت تأخیر) کاملاً فریز می‌شود و هیچ چیزی به کاربر نمایش داده نمی‌شود. پس از پایان تأخیر، صفحه یک‌باره و به صورت کامل لود می‌شود.

مقایسه رندرینگ با استریم و بدون استریم

با استریم رندرینگ

• تجربه کاربر روان‌تر و فوری است.
• ابتدا یک Placeholder یا ساختار کلی صفحه رندر می‌شود.
• کاربر حس می‌کند برنامه در حال کار است.

بدون استریم رندرینگ

• کاربر باید منتظر بماند تا کل صفحه لود شود.
• صفحه کاملاً خالی یا فریز می‌ماند.
• کاربر ممکن است فکر کند برنامه فریز شده یا دچار مشکل شده است.

استریم رندرینگ دقیقاً به همین دلیل مهم است. این قابلیت با بهبود تجربه کاربر در زمان‌های تأخیر، حس بهتری به او می‌دهد و باعث می‌شود وب‌سایت شما سریع‌تر به نظر برسد.

پیاده‌سازی در Blazor WASM

استریم رندرینگ در Blazor WebAssembly (WASM) نیز قابل استفاده است. با این تفاوت که در Blazor Server شما می‌توانید مستقیماً در کد کامپوننت به سرویس‌ها و ریپازیتوری‌ها وصل شوید، اما در Blazor WASM برای دریافت داده‌ها باید از یک Web API استفاده کنید.

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

نتیجه‌گیری و توصیه‌ها

استریم رندرینگ یک ابزار قدرتمند در Blazor است که به شما کمک می‌کند تا با مدیریت زمان‌های تأخیر، تجربه کاربری بهتری را ارائه دهید. این قابلیت در  دات نت 8 به بعد، به یک ویژگی کلیدی تبدیل شده و استفاده از آن در پروژه‌های بزرگ و کاربردی به شدت توصیه می‌شود.

شما تا حالا از استریم رندرینگ در پروژه‌های خود استفاده کرده‌اید؟ تجربه‌تان چطور بوده؟ آیا این قابلیت برای شما مفید بوده است؟ نظرات خود را با ما در میان بگذارید.