SSR,SPA,SEO的理解和对比

SEO

搜索引擎优化

由于SPA是通过AJAX加载页面数据的，很难保证站内数据被SEO获取到，有些搜索引擎对JS和AJAX获取数据并不支持

SPA

单页应用（single page application）

• 优点

---

1. 页面之间的切换快
2. 一定程度上减少了后端服务器的压力
3. 后端程序只需要提供API，不用管client是手机端还是PC端

• 缺点

---

1. 首屏打开很慢，用户首次打开要下载SPA框架及应用程序的代码，然后再渲染页面
2. 不利于SEO搜索引擎优化

SSR

服务器端渲染(server side rendering)

• 优点

---

1. 更快的响应时间，不用等待所有的js都下载完成，浏览器变成现实比较完整的页面
2. 更好的SEO，我们可以将SEO的关键数据直接在后台就渲染成html，从而保证搜索引擎的爬虫能爬取到关键数据

• 缺点

---

1. 占用更多的cpu和内存资源
2. 一些常用的浏览器API无法使用，比如window，document，alert等，如果使用的话需要对运行环境加以判断
3. 开发调试会比较麻烦，对SPA的一些组件的生命周期的管理会变得复杂，只会执行ComponentMount之前的生命周期，第三库使用受限，学习成本大。

为什么SSR比SPA要快

由服务器端请求首屏数据而不是客户端请求首屏数据，服务器端在内网进行请求，速度更快。但是客户端处于不同的网络环境，导致时间差
服务端渲染路线

客户端渲染路线

服务器端渲染会先向后端请求数据，生成完整首屏HTML后返回给客户端
客户端渲染会等待JS下载，解析完之后再向服务器请求数据，等待过程中是什么也没有的，所以会出现首屏白页的情况