Mat*_*tin 8 .net c# asp.net blazor .net-8.0
我一直在 .NET 8 中试验 Blazor,并试图了解自动渲染模式的工作原理。据我所知,Blazor 最初在自动模式下使用 WebSocket 连接来通过服务器端渲染提供交互性。然后,当后台加载 WASM 资源时,它会切换到 WebAssembly (WASM)。
然而,在我的测试中,我注意到在 WASM 资源完全加载之前没有可用的交互性。在浏览器的网络选项卡中,我可以看到 WebSocket 连接,但 UI 似乎只是预渲染的,而不是交互式的。
我还了解到,要在 WASM 中渲染的组件应该放置在项目中ProjectName.Client
,并且这些组件不能设置为 WASM 之外的任何渲染模式(包括服务器模式)。但是,如果自动模式第一次要求组件通过 WebSocket 连接(就像我们在 Blazor Server 应用程序中那样)进行交互,那么如何将这些组件放置在项目中呢ProjectName.Client
?
在我的测试中,我启用了网络限制来模拟慢速网络,我发现自动模式的行为几乎与 WASM 渲染模式相同。两种模式都提供预渲染,但在加载 WASM 资源之前没有交互性,即使在自动模式下也是如此。
此外,我注意到,如果我在 WASM 和自动渲染模式下禁用预渲染,则在 WASM 资源完全加载之前,所有组件都不可见。这似乎与自动模式应尽快提供交互性的想法相矛盾。
我观看了Blazor 的创建者 Steve Sanderson 的YouTube 视频。视频中显示,当在自动模式下首次加载组件时,它会使用 WebSocket 连接进行渲染和交互。从第二次刷新开始,它通过 WebAssembly 加载。但是,我在测试中似乎没有观察到这种行为。
谁能澄清自动模式在 Blazor .NET 8 中应该如何工作?如果是 WASM,只是预渲染,那么它与 WASM 渲染模式有什么区别(因为所有交互式渲染模式默认都开启预渲染)?
经过数周的调查,了解自动渲染模式在 Blazor 中的工作原理,我找到了答案。
\n\n\n我可以看到 WebSocket 连接,但 UI 似乎只是预渲染的而不是交互式的。
\n
这是不对的。Blazor 与服务器打开的 WebSocket 连接用于在加载 WebAssembly 之前带来交互性。它不引人注目的原因是 Wasm 之后立即加载,因此客户端没有足够的时间通过它发送任何数据。您可以通过在浏览器的访客窗口中启用网络限制并打开 wapp(Web 应用程序)来验证此行为。
\n\n\n如果自动模式要求组件第一次通过 WebSocket 连接进行交互(就像我们在 Blazor Server 应用程序中那样),如何将这些组件放置在 \xc2\xa0
\nProjectName.Client
\xc2\xa0 项目中?
嗯,虽然组件是放在 Wasm 项目中的,但是如果需要的话,在 Auto 模式下也可以由 Server 来渲染。由于 .NET Blazor 项目的结构,我猜他们除此之外没有其他解决方案。我认为这是因为与在 Wasm 模式下渲染服务器组件相比,在服务器模式下渲染放置在客户端项目中的组件更容易实现。
\n这可能看起来有点奇怪,但它确实有效。
\n\n\n此外,我注意到,如果我在 WASM 和自动渲染模式下禁用预渲染,则在 WASM 资源完全加载之前,所有组件都不可见。
\n
在 Wasm 渲染模式下,你是对的,这种行为是预期的。但在自动模式下,后台发生的事情是 wapp 等待几毫秒等待 Wasm 加载。如果此时加载完成,则不会建立 WebSocket 连接,而是直接使用 Wasm 进行交互。但如果 Wasm 需要很长时间才能完全加载,那么它会在 Wasm 加载之前建立临时 WS 连接以提供交互性。同样,您可以通过在启用了网络限制的来宾窗口中打开 wapp 来验证此行为。
\n