渐进式web全栈:blazor web app

前言

本文要说的这种开发模式,这种模式并不是只有blazor支持,js中有一样的方案next.js nuxt.js;blazor还有很多其它内容,本文近关注渐进式开发模式。

是的,前后端是主流,不过以下情况也许前后端分离并不是最好的选择:

  • 小公司,人员不多,利润不高,创业阶段能省则省
  • 个人开发者,接接私活,要么一个人全栈,累点;要么弄个小团队,各自分钱少点;
  • 不确定项目能做到啥程度,希望快速上线看效果,效果好继续,效果不好拉倒
  • 厌烦写js,又不得不做bs界面

诸如此类,不分离开发更简单,更省成本。

渐进式

vue是渐进式web前端框架,所谓的渐进式就是你不用一开始就整个项目全部使用vue,因为开始你可能并不熟悉vue,而是开始只使用vue的些简单功能,慢慢用它更复杂更好的功能,最终项目可能完全使用vue。

渐进式blazor不是官方名词,我随便喊的,它的意思是你不必一开始就使用前后端分离模式,而是用不分离模式简单的、快速开发、快速交付,后期如果用户量大了,你可以把一个或几个页面或组件变成分离模式,逐渐的变,最终可能把整个项目变成分离模式。俗话说:你可能还在画原型,而我的产品就是原型。

blazor是使用c#代替js写前端的web框架,它有如下几种渲染模式:

  1. 静态渲染:也称ssr,类似jsp、php、asp,由后端渲染静态html,所以你可以拿blazor来做普通网站,
  2. 服务端渲染:也称server模式,它还是在服务端执行代码,服务端和浏览器会建立一个websocket长连接,前端做了啥操作,消息发到服务器,服务器处理后计算需要改变的ui部分,推送给前端。
  3. 客户端渲染:也称assembly模式,首次访问时,下载dll到浏览器,可以aot发布为原生的webassembly运行,也可以在浏览器的webassembly中跑个小型.net运行时,在它之上跑我们的应用,所以可以理解它是纯前端
  4. auto模式:也称为同构渲染,首次访问以server模式运行,快速响应,且用户可以做任何操作;后台默默下载dll和运行时,之后自动切换为客户端模式,js中有类似的next.js nuxt.js。

.net8以前我们要么选择server模式,要么选择webassembly模式,只能二选难一,前者由于所有代码都在服务端,所以比较耗费服务器资源,但开发简单;后者是标准的前后端分离,不浪费服务器资源,但相对开发麻烦些。

.net8发布后,以前的mvc razorpage blazor server blazo webassembly都可以不用了,只需要创建blazor web app,至于使用哪种模式可以根据需要设置。

blazor的组件开发模式类似:vue组件、winform/webform的用户控件或自定义控件,更详细的请参考官方文档。

来了个单,按照惯例使用前后端分离方式

当然你可以使用其它方案,比如典型的:java提供api + vue前端 ,下图是blazor前后端分离方式,webapi提供接口 + blazor做前端,本质都一样

又来个单,为了简单,用不分离

你可以用php jsp asp等类似的方式,下图是blazor server方式,这个不太一样,blazor server是基于websocket实现交互的组件化开发方式。但总的来说是不分离方式。

用户量多了,不分离模式扛不住,渐进式分离

blazor的auto模式就是类似的模式。用户量大了原来的服务端渲染内存 cpu 都有巨大压力,那我们需要大重构成分离模式吗?no no no,你可以先把某个复杂的、访问频繁的、计算量大的、占用内存高的组件设置为auto模式,这样它最终会运行在客户端,就成了分离模式,又多了段时间,用户量更多了,你就继续改一部分组件,如此这般,用户越来越多,作为分离模式运行的组件越来越多,最终项目可能就变成纯纯的分离模式了。

反过来说,项目用了一段时间,没啥用户,项目死了,起码你前期投入并不多,不必太桑心。

相关推荐
Mintopia2 天前
无界微前端:父子应用通信、路由与状态管理最佳实践
架构·前端框架·全栈
Mintopia2 天前
🎭 小众语言 AIGC:当 Web 端的低资源语言遇上“穷得只剩文化”的生成挑战
人工智能·aigc·全栈
爷_2 天前
Golang: sqlc 和 goose 最佳实践
后端·go·全栈
前端开发工程师请求出战3 天前
Advanced RAG实战:评估闭环与持续优化体系
人工智能·全栈
Mintopia3 天前
Claude Code CLI UI
人工智能·aigc·全栈
pixle03 天前
从零学习Node.js框架Koa 【六】Koa文件上传下载实现:@koa/multer 与 koa-send 深度解析
node.js·web·koa·js·全栈·服务端·文件上传下载
Mintopia4 天前
🧩 Claude Code Hooks 最佳实践指南
人工智能·claude·全栈
小小小怪兽6 天前
关于氛围编程(Vibe Coding)的一切
人工智能·全栈
玉宇夕落6 天前
用 LLM 自动生成 SQL:从 SQLite Schema 到自然语言查询的完整实践
全栈
Mintopia9 天前
🧠 Claude Code 接入 Context7 MCP:一场上下文扩展的浪漫协作
人工智能·claude·全栈