服务端渲染

服务端渲染(Server Side Rendering)顾名思义即是在服务端将载入数据的组件渲染为 HTML 然后返回给客户端以直接显示，我们也可以通过类似于插入window.APP_DATA = data的方式将数据传入到 HTML 文档中。总体而言，服务端渲染可能会造成一定的带宽浪费，不过其能够优化用户的首屏加载时间与搜索引擎解析。在正式介绍服务端渲染之前我们还需要明晰下前后端分离与服务端渲染之间概念的差异。早期的网页是数据、模板与样式的混合，即以经典的 APS.NET、PHP 与 JSP 为例，是由服务端的模板提供一系列的标签完成从业务逻辑代码到页面的流动。彼时，前端只是用来展示数据，而随着 Ajax 技术的流行，将 WebAPP 也视作 CS 架构；抽象来说，会认为 CS 是客户端与服务器之间的双向通信，而 BS 是客户端与服务端之间的单向通信。从初始打开这个网页到最终关闭，网页本身也有了一套自己的状态，而拥有这种变化的状态的基础就是 AJAX，即从单向通信变成了双向通信。在这个衍化的过程中我们发现前后端未分离的一个重要特性就是页面是在服务端生成的，而服务端渲染虽然也是提倡在服务端即生成界面，但是其整体的技术栈却已是围绕富客户端框架的一系列新兴技术。我们现在称之为服务端渲染的技术并非传统的以 JSP、PHP 为代表的服务端模板数据填充，更准确的服务端渲染作用的描述是对于客户端应用的预启动与预加载。引入服务端渲染带来的优势主要在于以下三个方面：

- 对浏览器兼容性的提升，目前 React、Angular、Vue 等现代 Web 框架纷纷放弃了对于旧版本浏览器的支持，引入服务端渲染之后至少对于使用旧版本浏览器的用户能够提供更加友好的首屏展示，虽然后续功能依然不能使用。

- 对搜索引擎更加友好，客户端渲染意味着整体的渲染用脚本完成，这一点对于爬虫并不友好。虽然现代爬虫往往也会通过内置自动化浏览器等方式支持脚本执行，但是这样无形会加重很多爬虫服务器的负载，因此 Google 这样的大型搜索引擎在进行网页索引的时候还是依赖于文档本身。如果你希望提升在搜索引擎上的排行，让你的网站更方便地被搜索到，那么支持服务端渲染是个不错的选择。

- 整体加载速度与用户体验优化，在首屏渲染的时候，服务端渲染的性能是远快于客户端渲染的。不过在后续的页面响应更新与子视图渲染时，受限于网络带宽与重渲染的范畴，服务端渲染是会弱于客户端渲染。另外在服务端渲染的同时，我们也会在服务端抓取部分应用数据附加到文档中，在目前 HTTP/1.1 仍为主流的情况下可以减少客户端的请求连接数与时延，让用户更快地接触到所需要的应用数据。

总结而言，服务端渲染与客户端渲染是相辅相成的，在 React 等框架的协助下我们也可以很方便地为开发阶段的纯客户端渲染应用添加服务端渲染支持。

Links

最近更新于 0001-01-01