如何防止预呈现的 Blazor WebAssembly 应用程序中的内容闪烁？

Question

以下代码 sn-p 可以说明在服务器端呈现的 Blazor 应用程序中存在的问题：

App.Client/Pages/Test.razor

@page "/test" 

<p>@text</p>

@code 
{
    private string text;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(1000); // wait 1000 milliseconds
        text = "foo";
    }
}

当组件第一次在服务器上初始化时，text 变量被设置为 foo 并且包含该字符串的 HTML 文档被发送到客户端。但是，客户端 Blazor 应用不知道服务器分配给变量的值，该值再次变为 null。 OnInitializedAsync 在客户端再次调用，text 被设置回 foo，但仅在一秒钟后屏幕上没有任何内容 - 服务器端渲染旨在避免这种情况首先。

您知道发送已填充数据的组件的任何方法吗？

Answer 1

好的——只是有点挑剔——这是一个 Blazor 页面....它不是一个组件。

是的，他们使用的预渲染不是很好，但假设您将 Blazor 用于 SPA，它应该只发生一次。如果您使用 Microsoft.AspNetCore.Components.NavigationManager NavigateTo 方法，请小心避免硬重新加载。硬重新加载会触发预渲染，因为您刷新了 SPA。

为避免鞭打，您希望避免需要 1 秒来加载文本值。因此，您可以使用单例控制器并将其注入页面。在预渲染过程中，值还不知道，所以我们需要 1 秒来加载它。然后在客户端传递数据可以立即通过控制器访问。

当然，如果要显示大量数据，这并不完美。但在这种情况下，我通常会展示一个“加载”微调器，它会给客户一种运动受控的感觉。