前后端渲染

《精读前后端渲染之争》原文链接https://zhuanlan.zhihu.com/p/26366128

1.    概念

后端渲染：指传统的 ASP、Java 或 PHP 的渲染机制；

前端渲染：指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；

同构渲染：指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

2.    对比

《精读前后端渲染之争》一文详细阐述了前、后端渲染及同构渲染的优缺点，主要观点如下

方式	特点
前端渲染	1、局部刷新，无需每次都进行完整页面请求 2、懒加载。只加载可视区域数据，滚动后加载其它数据 3、富交互。使用 JS酷炫效果 4、节约服务器成本。省电省钱，支持 CDN 部署，服务端渲染时间减小 5、天生的关注分离设计 6、http response大小也会减少 7、JS一次学习，到处使用。Web、Serve、Mobile、Desktop
后端渲染	1、首屏性能。服务端渲染不需要先下载一堆js和css后才能看到页面 2、SEO 3、不用关心浏览器兼容性问题（随浏览器发展，这个优点逐渐消失） 4、对于电量不给力的手机或平板，减少在客户端的电量消耗很重要
同构渲染	优势： 1. 有助于 SEO 2. 共用前端代码，节省开发时间 3. 提高首屏性能 问题： 1. 性能，大量计算性能低、个性化的缓存无法实现 2. 不容忽视的服务器端和浏览器环境差异（前后端渲染不一致） 3. 内存溢出 4. 异步操作 5. simple store（redux） 结论： 总的来说，同构渲染实施难度大，不够优雅，无论在前端还是服务端，都需要额外改造。