类似react、vue之类的工具，我称之【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】为视图驱动，而非框架，框架大体上需要提供【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】完整的应用架构设计，而视图驱动解决的是视【本文首发于唐霜的博客】【转载请注明来源】图的渲染模式、数据驱动渲染模式、事件响应【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】模式，当然，围绕视图驱动，我们可以构建出【本文受版权保护】【未经授权禁止转载】上层的框架。而这两年，市面上因此出现了一【作者：唐霜】【版权所有】唐霜 www.tangshuang.net些框架，如remix等，就我个人观察而言本文作者：唐霜，转载请注明出处。【本文受版权保护】，新一代前端框架在某些方面具有一致性，可本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net以说，随着前端的发展，前端正在流向一种新【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net的模式，或者说一种自然而然呼之欲出的模式【版权所有】唐霜 www.tangshuang.net【本文受版权保护】。

【转载请注明来源】原创内容，盗版必究。【未经授权禁止转载】【原创内容，转载请注明出处】

新一代前端框架的基本特点

近期关注了remix, liveview【未经授权禁止转载】【转载请注明来源】, asta, flareact, il未经授权，禁止复制转载。【版权所有，侵权必究】c, Shopify Hydrogen等【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。框架，它们身上有显著的一种趋势，即不局限【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。在实现一种视图渲染的模式，而是希望在业务【转载请注明来源】【关注微信公众号：wwwtangshuangnet】层面更好的结合业务本身实现其需要的业务能转载请注明出处：www.tangshuang.net【版权所有，侵权必究】力，而不是专注视图驱动层面的技术追求。其未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。主要特征包含：

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

• SSR
【本文受版权保护】【原创不易，请尊重版权】
• 微服务化
【版权所有，侵权必究】【作者：唐霜】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。
• react风格流
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。【未经授权禁止转载】
• 云渲染
转载请注明出处：www.tangshuang.net原创内容，盗版必究。
• 前端0JS化
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net

接下来我会去分析这些特征的技术原理。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

前端框架SSR趋势

新出现的前端框架或一定要支持SSR，或为【本文首发于唐霜的博客】【本文受版权保护】配合SSR，更有甚者自己便是SSR的框架【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。。基于服务端渲染其实是web最早期的渲染本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】形式，在2010年前后我刚开始进入web【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】开发领域，那时便是基于php的框架输出w【版权所有，侵权必究】【转载请注明来源】eb界面，通过php和js的前后端配合，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net可以非常高效的完成页面开发。但2014年著作权归作者所有，禁止商业用途转载。【作者：唐霜】前后，整个前端开始往SPA方向发展，且在本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】angularjs的带头模范下，模板引擎转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】成为前端的基础设施，并开启了前后端分离的本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。大趋势。前后端分离从表面上，就是后端只专【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。注输出api接口，而前端基于ajax技术著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net请求这些接口拉取数据来渲染想要的界面。但【作者：唐霜】未经授权，禁止复制转载。发展至2018年时，SPA的庞大体系带来转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net了各种问题，以及整个技术领域的前进，SS原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netR又重回大家视野，但与早期的SSR不同，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net此刻的SSR由前端主导，而且研究的课题更【原创内容，转载请注明出处】【本文受版权保护】多是如何更高效的对界面进行渲染，仍然是前【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。端的范畴，只是借用了服务端的一些能力，其【转载请注明来源】未经授权，禁止复制转载。前后端分离的本质是没有变化的。

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】原创内容，盗版必究。

为什么会出现SSR的趋势？有人是讲大量企【本文受版权保护】【版权所有，侵权必究】业有SEO的需求，但我认为更重要的是，部【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。分SPA渲染的模式很慢，用户体验不好。

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。原创内容，盗版必究。

新阶段的SSR技术发展也经历了多个阶段：

【作者：唐霜】【作者：唐霜】【本文首发于唐霜的博客】【转载请注明来源】

1. renderToString阶段，这一阶【本文受版权保护】【原创内容，转载请注明出处】段在技术上主要是通过在后端nodejs环本文版权归作者所有，未经授权不得转载。【转载请注明来源】境下运行原本用于生成前端界面的代码，通过未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】重写框架运行方法的方式，把原本通过js生【转载请注明来源】【版权所有，侵权必究】成DOM节点的行为，变为在服务端直接生成【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net对应HTML字符串的行为，并通过服务器发【未经授权禁止转载】本文作者：唐霜，转载请注明出处。送给浏览器，当然，为了能够让用户继续体验【转载请注明来源】【版权所有】唐霜 www.tangshuang.netSPA的无刷新效果，在页面加载完之后，还【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net会有一个hydrate的过程，即页面加载【本文受版权保护】本文版权归作者所有，未经授权不得转载。完之后把原本的SPA能力赋予已出现的页面未经授权，禁止复制转载。【原创不易，请尊重版权】。
【原创内容，转载请注明出处】【作者：唐霜】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
2. 由于renderToString的整个实【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。现过程是执行程序拼接HTML，不仅需要启本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。动对应的环境，还要运行框架，才能最终到一【未经授权禁止转载】本文作者：唐霜，转载请注明出处。个页面的呈现，这个过程和链路都很耗费资源【未经授权禁止转载】【未经授权禁止转载】。为此，部分框架就试图优化这一过程，以提本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】升其性能。例如remix、asta等框架【原创内容，转载请注明出处】【未经授权禁止转载】，都用不同策略优化其渲染输出，让用户在感【原创内容，转载请注明出处】【原创不易，请尊重版权】官上获得更好的体验。
【本文首发于唐霜的博客】原创内容，盗版必究。
3. react18提出一种server co本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netmponents的概念，即直接在服务端渲【关注微信公众号：wwwtangshuangnet】【作者：唐霜】染组件，再patch到浏览器中。基于这一著作权归作者所有，禁止商业用途转载。【转载请注明来源】理念，新的框架不再走拼接HTML的思路，未经授权，禁止复制转载。【转载请注明来源】而是云渲染的模式，浏览器只作为一个可交互【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的输出设备，而非真正执行渲染过程的环境，未经授权，禁止复制转载。【版权所有，侵权必究】框架的渲染全部在服务端，再将渲染结果通过【原创不易，请尊重版权】【原创不易，请尊重版权】socket等通信方式patch到浏览器著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net上。
本文作者：唐霜，转载请注明出处。【作者：唐霜】

基于这一趋势，前端开发的过程也发生变化，原创内容，盗版必究。【版权所有，侵权必究】从最早的需要服务端客户端同时编写，到只需未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。要写服务端代码，再到不需要考虑任何与浏览【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。器相关的代码撰写。这一变化或者说未来前端本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的发展趋势，会从一个侧面削弱当前前端开发本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】中针对浏览器的部分，从而让开发本身更瘦身著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。。而且，基于这一趋势，前端后化话也更紧迫【转载请注明来源】原创内容，盗版必究。。

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net

前端框架微服务化趋势

前端基础设施的变更，让很多应用层的后端工原创内容，盗版必究。【原创不易，请尊重版权】作也可以让前端去胜任。后端越来越往底层的转载请注明出处：www.tangshuang.net【未经授权禁止转载】服务去收敛，而把应用层的业务，都可以交给【版权所有，侵权必究】【作者：唐霜】前端去完成。基于微服务架构的流行，服务于未经授权，禁止复制转载。【转载请注明来源】服务之间通过非http接口的形式通信，可本文作者：唐霜，转载请注明出处。原创内容，盗版必究。以获得新的组织形式。serverless【转载请注明来源】原创内容，盗版必究。等基础设施的成熟，让前端部署一个实现特定【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】业务目标的服务也更加容易。而且服务化之后【本文受版权保护】【版权所有】唐霜 www.tangshuang.net，很多依赖关系变成了更精炼的方式，甚至只【未经授权禁止转载】【原创不易，请尊重版权】有一种调用方式，这让业务的封装达到了最高著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。级别。

【版权所有，侵权必究】【未经授权禁止转载】

前端框架也在追寻这种趋势，大部分框架都希未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net望自己能够成为方便部署为微服务的框架，基转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。于这一理念，开发者把自己依赖该框架的服务原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】部署之后，就可以立即向其他业务模块提供自本文作者：唐霜，转载请注明出处。【本文受版权保护】己完成的业务能力，提供的内容里面直接包含【转载请注明来源】著作权归作者所有，禁止商业用途转载。了界面的部分，调用微服务就像调用组件一样原创内容，盗版必究。【未经授权禁止转载】方便精炼。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【作者：唐霜】

flareact等框架直接希望成为边缘渲未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】染等框架，不需要复杂的集群管理，直接在边【版权所有，侵权必究】【原创不易，请尊重版权】缘CDN上部署产物。当然，在CDN上无法【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】直接通过服务器内网联通到其他服务上，但也【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】可以非常方便的让前端的产物以最接近用户的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。方式，产生碎片化服务化的界面提供。

【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

我个人的预测是，未来的前端框架，将会提供【转载请注明来源】【关注微信公众号：wwwtangshuangnet】除了单个业务微服务化的能力之外，还会提供【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net集成微服务的架构能力，通过集成就可以极快【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的出多站点。

转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

前端框架react风格化

代码的写作风格有往jsx+hooks的方【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。向发展的趋势，新的框架大部分默认以jsx本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。作为自己表达界面结构的基础，同时用hoo【本文首发于唐霜的博客】【原创不易，请尊重版权】ks来管理从数据库拉取的数据或状态。这种【作者：唐霜】原创内容，盗版必究。风格化趋势已经是直接的明显的趋势。

【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

早前的时候，由于ssr多以拼接字符串的形原创内容，盗版必究。【未经授权禁止转载】式出HTML页面，因此，大家认为基于模版【转载请注明来源】【作者：唐霜】的框架更有优势，例如solid等框架，但【本文受版权保护】【原创不易，请尊重版权】随着拼接字符串的模式被打破，jsx本质是未经授权，禁止复制转载。【本文首发于唐霜的博客】js语法糖的优势就凸显出来，因为在渲染过【作者：唐霜】未经授权，禁止复制转载。程中，它可以做到以stream形式向浏览【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】器patch，从而做到先出首屏再持续渲染【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】的效果，极大的提升体验。包括livevi本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netew在内的大部分框架都遵循了react风【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。格化。在这些框架中，你能感受到类似ele【原创内容，转载请注明出处】【版权所有，侵权必究】ctron中在渲染线程里可以同时调用re【转载请注明来源】著作权归作者所有，禁止商业用途转载。mote能力的效果，你可以在写类似浏览器【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】端功能的同时，直接调用服务端的能力完成某【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。些特殊操作。

著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】

RSC（react server com本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netponents）的概念被提出后，Shop【版权所有，侵权必究】转载请注明出处：www.tangshuang.netify Hydrogen是一次大胆的实验原创内容，盗版必究。【本文受版权保护】，它完全基于该概念，提供了一套用于电商平【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】台搭建的系统，RSC的特点在于让组件运行【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在服务端，从而就可以做到直接在组件中直连【关注微信公众号：wwwtangshuangnet】【作者：唐霜】数据库。当然，RSC还没有被正式发布，具【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】体如何发展，还有待观望。

【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】未经授权，禁止复制转载。

云渲染

这一点在liveview中体现的尽致淋漓本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，你可以这样理解它，它在完成渲染之后，你未经授权，禁止复制转载。【原创内容，转载请注明出处】的每一个动作，都会被序列化为一段小段js著作权归作者所有，禁止商业用途转载。【本文受版权保护】on发送给后端，后端在接受到之后，直接在【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。后端基于这一段json对界面进行渲染，再【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。将渲染结果与上一次的渲染结果进行diff【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】，再将patch发送回浏览器，浏览器内的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net脚本拿着这段patch完成界面更新。这种著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。模式其实在php界早就发生了，livew【原创内容，转载请注明出处】原创内容，盗版必究。ire这个框架是基于laravel的，它未经授权，禁止复制转载。【未经授权禁止转载】就是按照上述的运行模式进行的，只不过它的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。后端逻辑是laravel的风格，而前端的【作者：唐霜】【原创不易，请尊重版权】框架大部分是react的风格。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

这种模式有一个非常奇特的福利效果，就是“本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。实时多播”，这在协同编辑、在线教学时具有【原创内容，转载请注明出处】【作者：唐霜】极强的适应性，例如在线教学，我们在自己的【原创不易，请尊重版权】【本文首发于唐霜的博客】页面的操作所带来的数据变更直接被写入到后【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】端数据库中，而后端会把这一变更直接反应到原创内容，盗版必究。【版权所有，侵权必究】新的渲染结果上。由于不同用户所访问的页面【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】使用了相同的数据库数据，所以，为了保持实未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net时性，框架会向当前用户发送新的变更，即使本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。这个变更不是当前用户的操作引起的。这一福转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】利效果在这些场景里面可以说是神奇至极，不原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】需要做任何的架构设计，直接基于框架的能力原创内容，盗版必究。未经授权，禁止复制转载。就能实现。

【转载请注明来源】原创内容，盗版必究。【原创内容，转载请注明出处】【原创不易，请尊重版权】

当然，也有一些不足，特别是在弱网环境下，【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】由于每一个操作都需要与后端去通信，由云端本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】完成渲染，那么如果网络不及时，前端就看不【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】到实时的变更效果，这就非常不友好了，所以原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，我们应该按照自己的场景来选择框架，而不【转载请注明来源】【本文首发于唐霜的博客】是一味追新。

【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

前端0JS趋势

从nodejs出现后，前端生态出现了翻天【版权所有，侵权必究】【本文受版权保护】覆地的变化，基于js的客户端渲染也占据了【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。主导，但可能是技术的发展总会回旋式上升，【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】时间一长，对js的厌倦感就会上升，因此，【转载请注明来源】【原创不易，请尊重版权】社区，特别是后端社区会涌现一些逆流工具。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。以htmx为代表，它们提供了迎合后端发展【未经授权禁止转载】【版权所有，侵权必究】趋势（简洁化，功能目标化）的需要，可以做本文版权归作者所有，未经授权不得转载。【转载请注明来源】到真正的0 js代码，即全部由后端动态输【本文受版权保护】【本文受版权保护】出必要的数据，前端基于该数据做动态响应。

【作者：唐霜】【原创不易，请尊重版权】

无论是否真正做到0 js的效果，我们可以原创内容，盗版必究。【转载请注明来源】从中发现，很多情况下，我们可能不需要复杂【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。的前端架构设计，只是为了完成某些页面的需【版权所有】唐霜 www.tangshuang.net【本文受版权保护】要，这种情况下，无论是后端输出也好，或者转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。前端直接写也好，其目标都是一致的，就是快【原创内容，转载请注明出处】【转载请注明来源】速、有效。这在很多长尾场合下非常常见，我未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】们要知道，前端不是全部都是大型的业务开发【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】，还有大量的展示类应用，它们不需要强大的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net前端架构，甚至常常不需要前端人员。

【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

结语

在2019年的时候，react和vue的未经授权，禁止复制转载。【原创不易，请尊重版权】热度达到了顶峰，我们那时认为前端的发展必【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。然是在类似的路径上往前奔，而基于马太效应【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】，后来者必然无法追赶上react或vue【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】，但是时间过去不到3年，如今的前端框架市【转载请注明来源】【版权所有，侵权必究】场已经发生了巨大的变化，这种变化一方面是转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】社区不断探索的结果，另一方面也说明并没有【本文受版权保护】未经授权，禁止复制转载。什么不可能突破的地方。而且前端这个领域，【原创内容，转载请注明出处】【版权所有，侵权必究】真正和后端有一个比较明确的界限，也就在2【原创不易，请尊重版权】未经授权，禁止复制转载。010年以后，短短12年，就翻转了4-5本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net个代际，可见领域的年轻和未来的发展。我们【本文受版权保护】【转载请注明来源】只有秉持不断学习的积极心态，才能更好的面【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】对和接纳未来可能出现的新技术。

【本文首发于唐霜的博客】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

2022-10-29 6365