SSR 概念

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