2020-11-17
SSR 概念
什么是渲染:
- 把 数据 + 模板 拼接到一起的过程
- 本质就是字符串的解析替换
传统的服务端渲染:
- 早期的web页面渲染都是在服务端进行
- 服务端根据数据和模板生成html直接给客户端
- 前后端代码完全耦合，不利于开发和维护
- 前端没有足够的发挥空间 因为大部分都是在后端进行
- 加大服务端压力
- 用户体验一般 因为要查看另一个网页必须重新刷新请求一遍
客户端渲染CSR
- 请求一个URL 服务端返回一个空的html 和 指引性的代码
- 客户端再ajax请求渲染所需数据 服务端查库 返回数据给客户端 客户端根据数据渲染页面
- 首屏渲染慢
- 不利于SEO
为什么首屏渲染慢？
- 客户端渲染要执行至少3次的http请求周期
- 第一个是空页面的请求
- 第二次是js的请求
- 第三次是动态数据的请求
- 服务端渲染是页面直出 服务端直接把渲染好的html返回给客户端
为什么不利于SEO？
- SPA单页应用的SEO几乎为0
- 因为搜索引擎需要获取网页的内容 服务端渲染可以让搜索引擎拿到首页的HTML字符串
- 而客户端渲染的单页应用初始首页一般没有内容 都是通过ajax拿到动态数据再用JS渲染出网页内容
现代化的服务端渲染（同构渲染 = 后端渲染 + 前端渲染）
- 请求一个URL， 服务端查询页面所需数据 渲染出首页的HTML和客户端SPA脚本 返回给客户端
- 客户端接收到首屏HTML直接渲染出首页 再通过页面中的脚本将当前页面激活为SPA应用
- 之后的所有交互和渲染都是由客户端进行 服务端只负责首屏的渲染
同构渲染SSR的确定
- 开发条件限时更大 因为项目需要同时在服务端和客户端都可运行 所以有些特定代码需要额外的区分环境
- 比如：浏览器的某些特定代码只能跑在某些生命周期中 一些外部扩展库不能直接在服务端运行
- 同时也不能在服务端渲染期间操作DOM
- 造成更大的服务的负载 占用大量服务的CPU资源
- 构建：客户端渲染仅需要构建客户端应用 SSR需要构建两个端
- 部署：客户端渲染CSR可以部署在任意的web服务器中，SSR仅能部署在node.js Server