如何减少使用 Blazor 服务器传输的数据量答案

【问题标题】：How to reduce the amount of data transferred with Blazor server如何减少使用 Blazor 服务器传输的数据量
【发布时间】：2020-05-15 09:05:49
【问题描述】：

我有一个 blazor 组件，它从服务中获取数据，然后将数据呈现到表中。

这是我的场景：

服务返回一个对象列表，每个对象都包含大量属性和一个对象层次结构
用户界面只能显示少量此类数据，因此仅显示部分@myObject.MyProperty 属性

@page "/fetchdata"
@inject WeatherForecastService ForecastService

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</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 List<WeatherForecast> forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = ForecastService.List;
        ForecastService.MyEvent += _Event;
    }

    private void _Event(object sender, EventArgs e)
    {
        InvokeAsync(StateHasChanged);
    }
}

所以在这种情况下WeatherForecast 是一个大对象，但只显示了它的一小部分属性。这个场景是否已经被 Blazor 优化了，还是服务器总是将整个对象“提供”给客户端？

【问题讨论】：

Blazor Server 仅向客户端发送 UI 更改，因此如果您要求显示一个属性，它只会发送显示该属性所需的内容
如果显示的十个属性中的一个发生更改 - 它只会发送该属性的更改...

标签： data-binding blazor blazor-server-side

【解决方案1】：

仅发送更改是有效的“优化”。

https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1#comparison-to-server-rendered-ui

来自 Blazor 文档（来自 Blazor 服务器部分）：

Blazor 中的 UI 更新由以下触发：

用户交互，例如选择按钮。应用触发器，例如计时器。图形被重新渲染，UI diff（差异）是计算出来的。此差异是所需的最小 DOM 编辑集更新客户端上的 UI。差异被发送到客户端二进制格式并由浏览器应用。

【讨论】：