图解 .NET 8 中的 Blazor 新特性 - .NET Conf 2023实况直击

一年一度的.NET Conf 大会在今日凌晨零点开播，我跟Blazor中文社区的很多朋友都熬夜观看了。在开场概括演说之后，Blazor是排在第一个出场的，可见Blazor在新版.Net中的地位依然是重中之重。

上图是开场keynote的演示，全新改版的官方示例项目EShop，它也是贯穿了从开场到云原生工具.NET Aspire介绍时都用到的示例应用。

这个应用已经引入了.NET 8的众多新特性，特别是前端部分引入了Blazor full stack 眼花缭乱的新特性。

出场的依然是两位Blazor负责人，Blazorx项目的开发经理丹尼尔和Blazor之父史蒂夫。

标题虽然跟前几年一样，《使用Blazor构建交互性丰富的WebUI》，但是内容已经与以往的完全不同。

这一次带来了更快的Blazor。还一语双关，更快地构建、构建更快的Web apps。

这个PPT是个动画，意思是把server和client合并在一起了，变成全栈WebUI。并且把Blazor的各大功能重新排位，重点已经不在server和wasm，而是从静态的服务器端渲染、增强导航与路由、流式渲染、单组件/页面的交互性、最后再到运行时自动切换交互性渲染模式。

这些特性下文一一介绍。

静态服务端渲染

抱歉这个PPT忘截了。但是我从网上看到了Steve在另外一个演讲中的PPT，我认为是更能反映出Blazor要做静态服务端渲染的初衷。

图中介绍的是整个Web发展史：

90年代-2005：是服务端渲染HTML的阶段。.Net这边是asp和webforms。感谢Webforms在这个时代就带来了完美的开发与交互体验。

2005-2010 是服务端HTML+与js结合的阶段，主要是利用jQuery实现方便的dom操作。.Net这边还是ASP.NET aspx时代。

2010-2015 是早期客户端渲染，angularjs、knockout等。.NET这边是MVC时代。

2015-2022 是现代客户端渲染阶段，也是单页应用。我们熟悉的react、vue、angular属于这个阶段。而Blazor在2019年发布总算是赶上了末班车。

到了今年，各大前端框架都在做服务端组件，包括最新的react和angular，都不同程度借鉴了blazor server的特性。

交互性

交互性在此前很少提到，只有在Blazor的口号——“使用C#而不是JS来构建交互性WebUI”中有提到，因为此前Blazor默认就是富交互性的。而.NET8引入服务端渲染和更多交互性层次之后，就需要大家去理解了。

前面讲的“静态”渲染，是“交互性”的程度最低的。

从 .NET 8 开始，Blazor从以前的全局交互性变为页面级和组件级交互性。意思就是全局默认是静态的，可以在局部选择交互性渲染方式。目前可选的交互性渲染方式有 Streaming SSR、Blazor Server、Blazor WebAssembly。

Streaming SSR是可以让在一次服务端请求中，让服务端连续返回html。先返回静态的内容，再返回需要查询数据库或其他较慢处理的内容。示例中Steve示范了一个倒计时。在一个下单请求中首先返回Blazor页面静态渲染的html，然后返回不同的数字的html节点，浏览器上的blazor.web.js自动替换掉静态页面中的占位符。

Streaming SSR的优势是能够加速首次渲染。不必等待所有数据都获取之后才返回所有内容。我之前用MVC做过CMS项目，一个页面很多内容都需要查询，响应时间很久。如果用 Streaming SSR，就能马上呈现静态的页面布局了。

增强导航，

能够让页面间的跳转变得像单页面一样。这个特性其实就是之前的pajx。无刷新跳转。只替换有变动的dom节点。但是Blazor的这个是服务端支持的，在页面跳转时，在服务端就计算变化的节点，然后只返回有变化的节点。这样能够节省请求流量、保持大多数的dom。注意事项是需要考虑JS的状态。

静态渲染表单。这是静态渲染重要的服务端交互方式。此前是通过事件来实现模型绑定，而SSR则是通过HTTP请求来做模型绑定。表单验证也变为服务端的，返回的验证信息就是通过上文的Streaming SSR实现。这个特性时静态渲染在一定程度上实现了交互性。

交互性组件就是原有的Blazor Server/Blazor WebAssembly组件。能够灵活地集成到静态渲染页面中，并且能够与增强导航和表单一起工作。

交互性组件最重要的更新，就是实现了自动模式。自动模式可以让组件/页面先使用Server实现交互性，同时后台加载WebAssembly文件，加载完后，自动切换到 WebAssembly。

来个大总结。

最后还有One more thing。就是全新的All in one 模板。把之前的两个Blazor模板和这次的全部功能集成到一个模板中，通过配置选项来根据需求选择需要的渲染模式、示例内容等等。

特别是授权类型这个选项，选择个人授权后，模板中就包含是整个Identity UI，从注册登录到用户管理都在里面了。而且是使用SSR实现类的，对学习SSR的朋友非常有帮助。

另外最新版的VS还支持了Blazor页面脚手架，终于可以跟MVC/Razor Pages一样通过VS点点鼠标就创建一个CRUD页面了！

新增页面

列表页面用了QuickGrid。有我的代码贡献！这下我再也不用担心大家不会写Blazor了！

最后的最后，丹尼尔做了个总结，如果想让已有应用能够使用 .NET 8 中 Blazor 带来的型特性，可以根据这个指引来实施。

1. 如果是已有的 Blazor 应用，那么只需要升级到 .NET 8 即可。

2. 如果是 ASP.NET Core app，可以添加 Blazor 页面。

3. 对于已有的MVC/Razor Pages项目，也可以通过 <component> tag helper 来引入 Blazor 组件。

4. 对于 Minimal APIs/Controllers 项目，还可以返回 RazorComponentResult 来返回 Blazor 页面。

5. 如果 api 还配合了JS前端框架，那么也可以通过 custom element 来引入 Blazor 组件和页面。

这个指引是递进的，适应在不同场景中集成 Blazor。

总得来说，SSR 能够解决前台用户侧的场景，Auto模式能够解决加载慢和网络问题。作为Blazor的老用户，我认为Auto模式是很强的功能，基本上解决了Blazor一直以来被诟病的加载问题和网络问题。但是要注意的是数据请求方式和组件状态的切换。请求方式需要从server的直接访问数据库切换为API调用，这就需要用户实现两套方法。Blazor只自动处理一部分状态的切换，更多的需要用户自己处理。

这两点我已经这最近两个月有所探究，总结了一些可以方面实现的方法和结合两者的布局模板。打算在下个月16号 .NET Conf China 大会给大家分享并带来更多内容。

诚邀赞助

AntDesign Blazor 项目和 Blazor 中文社区预计将会在 12月16日到北京参加 .NET Conf China 大会。届时打算会对 Blazor 和 AntBlazor 项目进行社区推广。

但不论是我们的开源项目、社区还是这次活动，都是为爱发电和非盈利的，如果antblazor与社区对你有所帮助，请赞助支持，以支持我到北京的路费和推广物料费用。

所有费用收支都会在antblazor项目的赞助名单中公开。对于大额捐助，可以在我们的项目网站和今后推广中提供品牌推广。