前后端渲染

前端渲染

• 局部刷新。无需每次都进行完整页面请求
• 懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 react-lazyload 实现
• 富交互。使用 JS 实现各种酷炫效果
• 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可
• 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现
• JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

前端渲染存在的问题

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

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

后端渲染

• 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
• SEO
• 服务端渲染不用关心浏览器兼容性问题（随意浏览器发展，这个优点逐渐消失）
• 对于电量不给力的手机或平板，减少在客户端的电量消耗很重要

后端渲染缺点

后端渲染完了之后，需要进行网络传输的体积大了，带来的网络损耗和网络传输时间问题 很多场景，尤其是在移动端，我们通常不会把渲染工作交给后端，一方面后端渲染需要时间，一方面庞大的渲染数据传输也有时延，所以就会出现白屏问题