这是我参与「第五届青训营」伴学笔记创作活动的第 14 天
SSR 服务端渲染
渲染
将数据填充到 DOM 结构中的过程
- 服务端渲染（server side render SSR）：向服务器请求数据，服务器把响应的数据填充到 DOM 结构中，再将整体返回给客户端
- 客户端渲染：向服务器请求数据，服务器把响应的数据返回，由客户端或浏览器端（JS 渲染），将返回的数据填充到 DOM 结构中
前端渲染历史
很久以前是传统服务端渲染 ---> 前后端分离（客户端渲染） ---> 流行服务端渲染（SSR）
传统的服务端渲染
- 传统的服务端渲染：客户端向服务器请求数据，服务器查询数据库拼接成html字符串，返回给客户端，客户端渲染html
- 优点：
- 网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
- 有利于SEO（搜索引擎优化），因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好
- 缺点：
- 在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了
单页面应用 SPA
- 客户端渲染：其优秀的用户体验，使其逐渐成为主流，页面内容由js渲染出来
- 过程：
- 客户端发送请求给服务器
- 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
- 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
- 服务器查询数据库，返回对应的数据
- 客户端渲染显示
- 缺点：
- 网速很慢的时候，它的首屏等待时间较长
- SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：)
流行的服务端渲染 SSR
- 现在的服务端渲染：是传统的服务端渲染和单页应用的一种折中的解决方案，后端渲染出完整的dom结构返回，前端拿到的内容包括：首屏及完整spa结构，应用激活后依然按照spa方式运行
- 过程：
- 客户端发送请求给服务器
- 服务器读取模板，解析成dom节点，返回一个完整的首屏html结构
- 客户端进行首屏激活（把用户写的交互的代码，在前端激活，重新变成一个spa应用）
- 这样后续，用户再点击超链接、跳转时，不会再向服务器发送请求了，而是使用前端路由跳转，只会发送一些ajax请求数据
- 优点：
- SEO友好
- 首屏加载快
- 缺点：
-
开发逻辑复杂
-
开发条件限制：比如一些生命周期不能用，一些第三方库也可能不能用
-
服务器负载大
作者：盼月亮
链接：juejin.cn/post/719919…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
