SSR（服务端渲染）

一句话：SSR就是把本来需要客户端做的事情，放在了服务端做

默认情况下，Vue.js可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

一、什么是客户端渲染 (CSR)？

CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。

image.png image.png

CSR利弊：

优点：网络传输数据量小、减少了服务器压力、前后端分离、局部刷新，无需每次请求完整页面、交互好可实现各种效果
缺点：不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢（渲染前需要下载一堆js和css等）

二、什么是服务器端渲染 (SSR)？

服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。

image.png image.png

三、为什么使用SSR

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

优点：

（1）更利于SEO（搜索引擎优化）

ssr:搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
因为谷歌和bing都是同步抓取，如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。如果要进行seo， 那么可能会需要用ssr来开发

（2）更快的内容到达时间 (time-to-content) 【更利于首屏渲染】

特别是对于缓慢的网络情况或运行缓慢的设备。因为浏览器不需要等全部的js都下载并执行完等来获取页面内容，而是直接展示html，所以页面内容显示更快。客户端压力小，对性能要求不高

缺点：

（1）开发条件受限

引入外部库受限

（2）服务端压力大

本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源

（3）涉及构建设置和部署的更多要求。

SSR需要处于 Node.js server 运行环境。

四、什么情况下使用SSR

简单来说，ssr就是本来需要客户端做的事情，放在了服务端做
通过服务端渲染的概念以及它的两个特点：首屏加载速度快、SEO优化。
主要看seo和首屏优化的重要程度。

五、扩展

服务器端渲染 vs 预渲染 (SSR vs Prerendering)

可以使用预渲染来优化SEO
无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
如果使用 webpack，可以使用 prerender-spa-plugin 轻松地添加预渲染。