前后端渲染
《精读前后端渲染之争》原文链接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) 结论: 总的来说,同构渲染实施难度大,不够优雅,无论在前端还是服务端,都需要额外改造。 |