SPA单页面应用
- 优点
- 用户体验好、开发效率高、渲染性能好、可维护性好…
- 缺点
- 首屏渲染时间长,不是服务端渲染好,是js在客户端生成html
- 不利于seo,搜索引擎爬取html内容时,单页面的html没有内容,需要js解析完才能生成网页内容
同构应用
- 在服务端执行前端框架代码生成网页内容,返回给客户端,客户端只需负责展示
- 通过服务端渲染首屏直出,解决spa应用首屏渲染过慢以及不利于seo的问题
- 通过客服端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
- 这种方式构建的应用称之为服务端渲染应用或者是同构应用
渲染
- 把数据和模板拼接到一起,本质:字符换的解析替换
传统服务端渲染
- 网页复杂时带来的缺点
- 前后端代码完全耦合在一起,不利于开发维护
- 前端没有足有的发挥空间
- 服务端压力大
- 用户体验一般(访问每个页面都要刷新)
客户端渲染
- ajax使得客户端动态获取数据称为可能
- 后端负责处理数据接口
- 前端负责将接口数据渲染到页面中
- 前端更为独立,不在受后端限制
- 不足
- 首屏渲染慢
- 不利于seo
为什么客户端渲染慢(白屏)
- 至少需要三次http请求周期
- 请求html
- 请求js脚本
- 请求数据
- 服务端渲染加载一次html即可
现代化服务端渲染
- 同构渲染 = 后端渲染 + 前端渲染
- 流程
- 基于react、vue等框架,客户端渲染和服务端渲染的结合
- 在服务端执行一次,用于实现服务端渲染
- 在客户端再执行一次,用于接管页面
- 基于react、vue等框架,客户端渲染和服务端渲染的结合
- 核心解决seo和首屏渲染慢的问题
- 拥有传统服务端渲染的有点,也有客户端渲染的优点
同构渲染应用的问题
- 开发条件所限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩招库可能需要特殊处理才能在服务端渲染应用中使用
- 不能在服务渲染期间操作dom
- …
- 某些代码操作需要区分运行环境
- 涉及构建设置和部署的更多要求
- 构建:客户端渲染仅构建客户端应用即可,同构渲染需要构建两个端
- 部署:客户端可以部署到任意的Web服务器中,同构渲染只能部署在node.js Server
- 更多的服务器负载
- 在node中渲染完整的应用程序,相比仅仅提供静态文件的服务器需要大量占用cpu资源
- 如果应用在高流量环境下使用,需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理
- …
- 服务端渲染使用建议
- 首屏渲染速度是否真的重要
- 是否真的需要SEO