什么是 SSR
首先让我们来了解一下 MPA、SPA,最后你就明白了什么是 SSR
MPA（多页面应用）
传统的 web 开发过程：客户端向服务端发送请求，服务端在进行一系列数据处理后生成html页面，然后将html页面返回给客户端。
MPA多页面应用即指拥有多个独立页面的应用，每个页面互不干扰，自身都携带 js、css 等资源，在进行页面跳转时需要整个页面的资源重新刷新。
优点：
-
首屏加载速度快
访问网站进入首页，服务器只需返回一个
html页面即可，这个过程只经历了一次 http 请求，所以页面展示速度非常快。 -
SEO 效果好
搜索引擎在做网页排名时，要根据网页的内容才能给网页权重，从而进行网页排名。搜索引擎可以识别
html内容，每个页面所有的内容都在html中，所以 MPA 的 SEO 排名效果好
缺点：
-
页面切换慢
因为每次跳转都是切换到一个新的页面，客户端需要重新发送
http请求，服务端需要重新渲染生成html返回给客户端，如果网络状态不佳，那么在页面之间来回跳转时就会发生明显的卡顿，影响用户的体验。 -
用户体验不佳
SPA（单页面应用）
SPA 的渲染过程： 由客户端访问URL发送请求到服务端，服务端返回一个含有基本结构的html外壳。客户端接收到该html结构后便开始渲染，若在渲染过程中需要请求数据则会再次向服务端发送请求，服务端返回数据后由客户端完成数据处理和最终渲染。页面之间的跳转实际上是组件状态的变化。
优点：
- 页面之间的切换非常快，在一定程度上减少了后端服务器的压力。
缺点：
- 首屏打开速度很慢，因为用户首次加载需要下载 SPA 框架及应用程序代码，必须等待 JS 执行完毕才能渲染出首屏。
- 不利于
SEO，爬虫只能拿到一个少量html元素，认为页面是空的，不利于SEO
基于前端的 SSR （服务端渲染）
SSR并非传统完全基于后端的SSR，而是基于前端的SSR，是介于MPA和SPA之间的折中方案，后端渲染出首屏的DOM结构返回，客户端拿到首屏内容，再用单页面路由和渲染，故称之为基于前端的SSR
SSR 渲染过程： 客户端发送请求到服务端，服务端读取对应URL的模板信息，在服务端做出html和数据的渲染，渲染完成后返回整个首屏的html结构给客户端。所以当用户访问首屏时，速度就会相较于单纯使用SPA的方式要快得多，但是该应用仍旧是一个SPA应用。
缺点：
- 开发条件所限。浏览器特定的代码，例如 document，windows 等函数只能在某些生命周期钩子函数（
lifecycle hook）中使用。一些外部扩展库（external library）需要经过特殊处理才能在服务端渲染应用中运行。 - 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序（SPA）不同，服务器渲染应用程序需要处于
Node.js运行环境中 - 更多的服务器负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源，在高流量环境下使用 SSR 时需要足够的服务器配置并采取一定的缓存策略。