Blazor SPA 的本质是什么以及服务器端渲染如何与 Blazor 的新 Web 应用程序配合使用

Blazor 通常被称为单页应用程序 (SPA) 框架。当我第一次开始使用 Blazor 时，我对 SPA 的含义、组件如何为 SPA 架构做出贡献以及所有这些如何与交互性联系在一起感到困惑。

今天，我将解答大家可能关心的三个问题：

1. 什么是 SPA？
2. 了解所有新的“Blazor Web App”模板。
3. 是什么使 Blazor 成为 SPA 应用程序？

什么是 SPA？

图 1 显示了传统的 Web 应用程序如何处理用户请求，它通常涉及用户为每个新页面向服务器发出请求。

例如，向服务器发送对“www.facebook.com/home.html”这样的主页的请求，服务器处理该请求然后返回主页。而当用户导航到个人资料页面时，将发出另一个对“www.facebook.com/profile.html”的请求，服务器现在将返回个人资料页面。

每次交互都会导致整个页面重新加载。

图 1：传统 Web 应用架构

现在让我们看看 SPA 应用程序是如何工作的，

用户体验保持不变。然而，在服务器上，我们不再提供完整的网页，而是使用组件。这是因为 Blazor 是一个基于组件的单页应用程序。

您可能想知道，哪个单页？在图 2 所示的架构中，App.razor是所有用户请求定向到的网页。服务器加载此单页并将其替换为请求的组件。

例如，当用户请求主页时，App.razor 会加载Home.razor组件。同样，当用户请求个人资料页面时，服务器首先加载App.razor，然后再加载 Profile.razor。

如下所示，Profile组件有附加组件， UserInfo.razor和UserOrders.razor。这称为组件层次结构。

图 2：基于 Blazor SPA 组件的架构

相比之下，SPA 会加载单个页面，并在用户与应用交互时动态更新内容。这是通过动态加载组件来实现的，无需完全重新加载，从而带来更流畅的用户体验。

例如，在 YouTube 上，当你给视频添加评论时，评论部分会更新，而不会中断视频播放。这是因为评论部分是一个单独的组件，可以独立刷新，而不会影响其他部分。

创建 Blazor Web 应用

让我们通过创建 Blazor Web 应用程序来看一下它的实际效果。

• 打开 Visual Studio 并选择 Blazor Web App 模板。

图 3：创建新的 Blazor Web 应用程序

• 为您的应用命名并选择一个位置。

图 4：Blazor 中的项目配置

• 选择“.NET 8” 作为框架。将“身份验证类型”设置为“无” ，并为“交互式渲染模式”选择“无”，以确保我们使用 Blazor SSR（静态服务器端渲染）。忽略“交互位置选项”