003.精读前后端渲染之争.md

传统后端渲染 ASP Java PHP 渲染机制
前端渲染 JS 渲染页面大部分内容前后端分离方式 RESTFUL API 获取后端数据
同构渲染(isomorphic rendering) 通过 node.js 端直出 HTML

前端渲染优势：

局部刷新无需每次都进行完整页面请求
懒加载在页面初始化的时候可以只加载可视区域内的数据滚动后加载其他数据(react-lazyload)
富交互实现各种 JS 的炫酷效果
节省服务器成本由于服务器不需要解析 JS，前端部署简单，只需要服务器支持静态文件上传即可，同时 JS 类库可以通过 CDN 获取
天生关注分离设计服务端提供访问数据库数据接口(Restful) JS 只需要关注数据交互(获取和展示)
JS Learn once，run anywhere,多端应用开发

后端渲染优势

首屏性能(服务器解析好 JS、CSS、HTML),直出
SEO(页面在服务端完全渲染好才展示) 搜索引擎获取
不需要关心浏览器兼容性问题(到目前这个优势越来越小，因为浏览器的 user-agent 行为兼容【polyfill】)

前端渲染遇到的主要问题

SEO (传统搜索引擎只能从 HTML 抓取数据，SPA 无法被抓取)
首屏性能

产品过渡---- 全栈同构理想化 => 首屏或部分同构

同构带来的问题

性能
不容忽视的服务器端和浏览器端差异 (1) document 等对象找不到的问题 (2) DOM 计算报错问题 (3) 前端渲染和服务端渲染内容不一致的问题 (4) 浏览器环境与 Node 环境差异问题(window && global)
内存溢出
异步操作
simple store(redux)

首屏优化

分拆打包页面进行分包切换过渡时加上一些 loading 和 transition 的效果
交互优化骨架屏的使用为解决等待加载过程中白屏或者界面闪烁造成的割裂感官体验
部分同构核心部分同构的方式优先渲染出来

?? 微前端

Next.js 优点 (附录)

巧妙使用标准化解决请求的问题
使用 styled-css 解决 css-in-js 的问题虽然没有 styled-component 那么强大，但是足够简单
Fast by Default 页面默认拆分文件方式打包，支持 Prefetch 页面预加载