服务端渲染vs客户端渲染到先后端同构

关于服务端渲染与客户端渲染的优劣，互联网上已经有过不少的文章进行过度析，在这里我谈一下我我的的看法。

首先，仍是来老生常谈一下关于两种渲染方式的主要优劣：

服务端渲染（仅列出当下最突出的优劣）：

优：

• SEO友好（目前现状下，我认为是最大的优势，也是最大的需求）
• 首屏渲染速度快（不用下载臃肿的bundle.js）

劣：

• 增长服务器压力（在访问量猛增时，这是很是致命的，可能直接致使服务器挂掉）
• 交互方式单一，没法进行异步刷新（能够经过后端在html中插入js代码绑定事件来实现异步刷新）

客户端渲染的优劣则与服务端渲染相反。

在十几年前，那时候javascript尚未兴起，web开发仍是使用传统的ASP、Java、PHP等语言，渲染方式也就局限于服务端渲染。可是随着jQuery的发展，异步加载技术的成熟，前端所作的事情也就愈来愈多。随着一批批前端开发人员对于交互体验的不断完善，页面性能的极致追求，在近几年不断涌现出很是优秀的前端框架库，好比说当下最流行的Angular、React、Vue和处于成长阶段的next.js、阿里的beidou框架等。能够说，现在js真可谓是百家争鸣了。

从一开始后端语言驱动的服务端渲染，到现在React等前端框架引领的客户端渲染，不论是用户体验方面，仍是性能方面，都有了一个质的提高。当咱们正享受着客户端渲染带来的温馨时，一部分互联网企业又悄悄的变回了服务端渲染，这样一个逆着发展方向的作法，实属无奈的选择，很大一方面是为了应对国内某度尴尬的SEO。为了针对服务端渲染的需求，React还实现了renderToString的方法用来将根据数据生成的dom结构转成相应字符串，方便由后端输出给前端。至于Vue和Angular有没有实现相似的方法尚未去了解过，用兴趣的同窗能够去他们的官网查下文档。

据我所知，Google已经实现了能够经过执行页面中js代码的方式来爬取数据，也就是说，Google已经有能力爬取客户端渲染的页面了（不是崇洋媚外，确实人家作的比国内好），而国内某度，还停留在爬取html的阶段。单纯的客户端渲染，html文件是没有实质性内容的，全部内容都是经过js异步加载来的，因而某度面对客户端渲染的页面，只能两眼一黑。

不过，国内搜索引擎终究也会实现对客户端渲染页面的爬取的，这只是一个时间问题罢了。虽说在当下，服务端渲染这个最大的优势仍是客户端渲染没法解决的，可是随着时间的推移，互联网的进步，这都将再也不是问题。

再来讲说首屏渲染的问题。用过React或者Vue的同窗都知道，打包出来的bundle.js文件大小一般都在1M以上，而这个入口js一般要在渲染首页以前彻底下载完毕，而后再运行其中的js获取数据、渲染页面，这是spa页面加载的一个机制。js的运行、数据的获取、页面的渲染这些都是浏览器的工做，基于如今的V8引擎，这些步骤均可以很快完成，而这个1M以上甚至更大的入口js的下载就是一个很是大的问题了。若是是pc端，在目前国内正经常使用户的网络环境下，这点大小的文件还不成问题，但若是是移动端，就要好好考虑一下了。在4G网络环境下，这1M的文件能够说下载起来很是轻松，1秒就能够下载完毕；若是使用3G网络，则1M大概须要下载4到5秒，这个时间已经影响到用户体验了；若是使用2G网络，或者在信号很差的地方，那这个时间就惨不忍睹了，用户须要等待漫长的白屏，甚至会形成当前页面已经打不开了的误解。

客户端渲染流程

针对这种网络情况很差的状况下，首屏渲染极慢的问题，有人提出了同构的思想。其意为先后端使用同一套代码，首屏使用服务端渲染，将渲染好的html直接交给浏览器去渲染，浏览器渲染出首屏以后继续下载bundle.js，运行js，而且从新渲染页面。因为渲染好的html流相较于bundle.js来讲，体积小了不少，因此采用同构方式的web页面，必定程度上解决了首屏渲染慢的问题，并且合理利用缓存策略还能够必定程度减轻服务器压力。固然这种模式当中还存在着其余问题，在这里就不细说了。

同构渲染流程

使用同构这种开发模式，虽然不能彻底解决SEO的问题，可是首屏是能够被爬取的，若是说项目不是相似于淘宝这种内容型网站（网站内部各个页面都有SEO需求），那么这种模式就很是优秀了，解决了纯客户端渲染在当下面临的两个最大的问题。

在今年举办的第12届D2前端大会上，笔者又听到了一个十分优秀的想法，而且阿里已经将之实现并申请了专利————智能降级策略。具体名字是否是这个已经记不太清了，大体内容是在同构的基础之上，优先使用服务端渲染，当访问量激增致使服务器负载超过设置的阈值以后，智能将部分渲染任务交给客户端处理，使服务器承受压力下降（想一想就很厉害啊，毕竟阿里，有钱有人有才）。

毫无疑问，同构或者智能降级在面对当前国内互联网发展情况下，是很是有发展空间的。可是若是须要考虑到开发成本和硬件成本，单纯的客户端渲染仍是占有优点的。同构或许是web开发的一个方向，可是毫不仅仅是惟一的一条路，具体采用什么样的方式构建项目，仍是须要根据具体项目的需求来肯定。

文中图片来源于 以同构之名，再谈 Redux/Vuex 的必要性