1991 年 8 月,第一个静态页面诞生了,这是由 Tim Berners-Lee 发布的,想要告诉人们什么是万维网。从静态页面到 Ajax 技术,从 Server Side Render 到 React Server Components,历史的车轮滚滚向前,一个又一个技术诞生和沉寂。
前言
1994 年,万维网联盟(W3C,World Wide Web Consortium)成立,超文本标记语言(HTML,Hyper Text Markup Language)正式确立为网页标准语言,我们的旅途从此开始。本文将沿着时间线,从“发现问题-解决问题”的角度,带领大家了解 Web 技术发展的关键历程,了解典型技术的诞生以及技术更迭的缘由,思考技术发展的原因。
Server Side Render,服务端渲染,简称 SSR,又称服务端同构、直出,一般使用 NodeJS 实现。这里的服务端渲染和以前的不一样,SSR 会利用已经“脱水”的首屏数据来渲染首屏页面返回给客户端,到了浏览器再注入浏览器事件,并且保留单页应用的能力,对 SEO 非常友好。但学习成本高,限制较多。让我们看看传统 SPA 和加入了 SSR 的 SPA 在请求上的区别:传统 SPA 可以更快的返回页面,请求响应时间更短;加载 JS 后才开始渲染,白屏时间更长,loading 结束后用户感知到的相对可交互时间更早。而 SSR 在接到浏览器请求时,先从后端拉取首屏数据渲染在页面内才返回,请求响应时间更长;因为节约了一段浏览器请求首屏数据的时间,白屏时间更短。由于 JS 异步加载,用户感知的相对可交互时间变晚。但体验上 SSR 一般更好。在极端情况下,用户眼中传统 SPA 会一直显示 loading,使用了 SSR 的页面则会出现“点不动”的情况。大多数时候 SSR 体验会更佳,因为服务端承担了大部分渲染工作,这也导致服务端负载变高。但在业务复杂的情况下,SSR 首屏请求的接口数很多,导致返回 HTML 变慢。归根结底,SSR 不能很好的应付业务复杂的情况,首屏要加载的东西还是太多了。所以我们要怎样让用户感知到的白屏时间变短呢?
智能手机的飞速发展,这张图表现的淋漓尽致。第三次浏览器大战是争夺移动端市场份额的一战,也是当下正在进行的一战。Benedict Evans: “Mobile is eating the world.”(移动设备正在蚕食世界) “Mobile remakes the Internet.”(移动设备正在重构Internet)
而未来,浏览器真正的对手不再是浏览器,而是小程序这样结合了APP和网页优点的新兴技术。
未来
早在 2009 年,Facebook 的工程师就开发了 bigPipe,让 Facebook 页面打开速度提高了两倍。bigPipe 使用 分块渲染 的思想,将网页的渲染变成了一小块一小块的,服务端渲染好一块页面就发送给客户端。他们直接把木桶拆了,打破了短板效应。时隔 11 年,也就是 2020 年 12 月,React 团队提出了 React Server Components,算是一个可扩展的前后端融合方案。其理念和 bigPipe 类似,把组件放在服务端渲染,节省了从浏览器进行数据请求的开支,一些运行时也可以不用放到浏览器,减小了包大小(如 markdown 在服务端渲染好了,也就不再需要把工具库发送给浏览器了)。React Server Components 的引入,也同步做到了自动的 Code Split。不同的是 React Server Components 返回的不是 HTML,而是带有结构和数据的自定义类 JSON 数据。这种结构,是对服务端渲染的核心(结构+数据)进行抽象,结合 React 的工作方式(如 Suspense),平缓的从服务端过渡到了客户端,维持了组件状态,并且可以更自由的拼装服务器组件和客户端组件。关于拆分这条思路,让我想到微前端,虽然现在微前端还有很多问题,但微应用即服务也不乏为一条解决之道。未来前端或许会往“小而美”的方向发展,甚至形成一个以服务端组件为单位的包管理器,网页打包大小会越来越小,更多的组件是从网络上直接获取。此外,我也很期待 Web Components 的发展,有了原生的支持,0kb runtime 也不是不可能了。合久必分分久必合,现存很多前端框架也可以得到统一了。当然现在 Web Components 想要投入使用,首先离不开浏览器的支持,而且必须有一个平缓的过渡,此外兼容性也是一个大问题(最后还是苦了程序员们)。本文首发公众号:腾讯技术工程(ID:Tencent_TEG),如需转载请联系出处。