• 1 引言

十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery库、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架（rendr、Lazo）从先驱变成了先烈。

明确三个概念：
「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；
「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；
「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

2 内容概要

前端渲染的优势
网络传输数据量小（减少了服务器压力）
局部刷新。无需每次都进行完整页面请求
富交互。使用 JS 实现各种酷炫效果

后端渲染的优势
前端耗时少（前端只负责将html进行展示），
有利于SEO

3 精读

前端渲染是未来趋势，但前端渲染遇到了首屏性能和SEO的问题。

前端渲染遇到的问题
前端渲染主要面临的问题有两个 SEO、首屏性能。

SEO 很好理解。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。

同构的优点
同构恰恰就是为了解决前端渲染遇到的问题才产生的，至 2014 年底伴随着 React 的崛起而被认为是前端框架应具备的一大杀器，以至于当时很多人为了用此特性而放弃 Angular 1 而转向 React。然而近3年过去了，很多产品逐渐从全栈同构的理想化逐渐转到首屏或部分同构。让我们再一次思考同构的优点真是优点吗？

1】、有助于 SEO
首先确定你的应用是否都要做 SEO，如果是内容型的网站，那么可以考虑专门做一些页面给搜索引擎

2】、共用前端代码，节省开发时间
其实同构并没有节省前端的开发量，只是把一部分前端代码拿到服务端执行。而且为了同构还要处处兼容 Node.js 不同的执行环境。有额外成本，这也是后面会具体谈到的。

3】、提高首屏性能
由于 SPA 打包生成的 JS 往往都比较大，会导致页面加载后花费很长的时间来解析，也就造成了白屏问题。服务端渲染可以预先使到数据并渲染成最终 HTML 直接展示，理想情况下能避免白屏问题。

同构缺点
更复杂的开发，服务器端和浏览器环境差异
更复杂的构建和部署
加重服务器负载（性能）
总的来说，同构渲染实施难度大，不够优雅，无论在前端还是服务端，都需要额外改造。

首屏优化
再回到前端渲染遇到首屏渲染问题，除了同构就没有其它解法了吗？总结以下可以通过以下三步解决

1】、路由组件懒加载
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，并在页面切换时加上一些 loading 和 transition 效果。

2】、交互优化
首次渲染的问题可以用Skeleton Screen 提升用户感知体验
加载动画一直使用

由它衍生而出的各种加载动画：

不过，现在有了更棒的加载体验方法，keleton Screen Loading，中文一般叫做骨架屏。
所谓Skeleton Screen Loading即表示在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架，感知到页面正在逐步加载，加载完成后，最终骨架屏中各个占位部分将被真实的数据替换。

3】、部分同构
部分同构可以降低成功同时利用同构的优点，如把核心的部分如菜单通过同构的方式优先渲染出来。我们现在的做法就是使用同构把菜单和页面骨架渲染出来。给用户提示信息，减少无端的等待时间。

3同构图

3 总结
客户端渲染是未来的主要方向，服务端则会专注于在数据和业务处理上的优势。
但由于日趋复杂的软硬件环境和用户体验更高的追求，也不能只拘泥于完全的客户端渲染。同构渲染看似美好，但以目前的发展程度来看，在大型项目中还不具有足够的应用价值，但不妨碍部分使用来优化首屏性能。做同构之前 ，一定要考虑到浏览器和服务器的环境差异，站在更高层面考虑。