前后端分离
- 用户输入url,拉取html
- html中的js加载完成,开始请求初始化数据(如用户信息的json)
- 初始化数据到达浏览器,数据被渲染出来
数据直出
- 用户输入url,后端拉取内网内的数据,数据拼接到html上返回,并用js打一个全局标记,标记初始化数据已经存在
- 数据和html达到浏览器
- js判断初始化数据是否存在,是则不再请求,否则开始请求
以上两者的区别:前者开发效率高,对多终端开发很方便;后者效率高,只请求了一次,就这一次请求的优化,可以大大优化用户的体验(初始数据能尽快显示,减少首屏时间)
服务端渲染
在以上数据直出的基础上,拉取数据之后,就开始在服务端渲染,把渲染后的html返回(后续交互用的js、css等在浏览器请求)。这对SEO比较友好
同构
React同构是指在服务器端Node.js环境下计算出页面的结构返回给浏览器减少浏览器端的计算来优化首屏加载时间。
需要考虑的细节:
- 组件生命周期
- 要求服务端处于node环境
- 更大的服务器负载
http://imweb.io/topic/5636466d09e01a534b461ec3