聊下SSR和QWIK技术发展趋势

361 阅读3分钟

技术趋势

服务端渲染SSR技术展到2024 年已经普遍被接受,以 Vue 生态下的 Nuxt 生态这些年发展的非常好。但 SSR技术仍然在不断演进,尤其最近一年来,随着Qwik 1.0的发表,将 Web 页面的性能提升到一个新的高度。

早期的模版技术

早期JQuery时代,都是通过ftl这种后端模版进行页面的渲染,因为后端常常使用的是Java语言,与前端的 JS语言形成异构。虽然说服务端有渲染,但这种渲染仍是非常初级的。对页面的事件,及对 DOM的操作是通过 JQuery来进行。

随着ES6的标准发布,JS这个语言有了新的飞跃,前后端都可以通过JS进行处理,语言上完成了同构。同时,随着虚拟 DOM的技术成熟,后端也可以通过JS生成虚拟 DOM,这与前端没有区别。形成了浏览器与服务端Node对 JS 的平台无关性。所以诞生了 SSR技术。

CSR 技术

当前的客户端渲染CSR技术是非常成熟的方案,如 ReactVue的成功一样,整体服务端只负责静态资源的下发。所有服务端会变得非常简单,一般是普通的 Nginx 服务器就能解决这个问题。这个时候形成了前后端研发的分离。

后端研发只负责提供数据 API接口,开发相应的逻辑。不需要关注前端页面的样式,以及相应的交互逻辑。这大大提升了软件开发的协作效率。但随着 JS量的增加(应用复杂程度的增加),前端 SPA整体加载性能会受大的影响,尤其影响首屏加载时间(FCP,First Contentful Paint),而且对 SEO 会有很大影响。

CSR技术

SSR技术

服务端渲染技术SSR,以 Nuxt 生态为例子,所有的 DOM 页面的渲染都发生在服务端。所有服务器,需要有 Node 环境。但服务端渲染无法解决事件和交互相应的问题,渲染后的页面发送到前端后,需要在前端做水合(Hydrate)。水合的操作会影响 TTI(Time to interactive)的时间。

虽然解决了 FCP和 SEO的问题,水合的操作仍然会整影响整体页面的性能。

SSR技术

QWIK

Qwik技术是对当前 SSR技术的演进,它虽然是一种 SSR 方案,但已经和当前主流的 SSR技术有了很大的不一样。

它解决问题的思路更加打开了。我们在想这样一个问题,为什么需要水合的过程。这个过程在服务端已经处理过一次,如果再处理一次,那整体的性能必然受到影响。所以,如果去掉水合的过程。从服务端下发的渲染好的页面就是可用的页面。这更加符合技术发展的方向。也就是说服务端已经完成了渲染,浏览器只需要展示就行。这更加直观。这就将技术问题上升到一个新的高度。

但要实现这个设计上的理念需要更多的工作要做,Qwik 在这上是一种非常好的实现。它将水合的过程在服务端完成后进行序列化保存起来,然后在浏览器上进行反序列化。

我认为这未来 Web 演进的新方向。Qwik将大有可为。

Qwik技术