客户端渲染CSR、服务器端渲染SSR、预渲染Prerendering

什么是客户端渲染 CSR

在进行SPA（单页面应用）开发时，大多数都会选择Vue.js。默认情况下，会生成vue组件，输出到浏览器，进行生成 DOM 和操作 DOM。使用vue.js开发的项目在浏览器端是看不到页面内容源代码的。

例如下面这个项目，页面中显示的内容如下

单击右键查看网页源代码，显示如下图，只能看到主体内容只有一个id为app的div标签，那么页面的内容是从哪里来的呢？很明显，是通过js代码控制生成的。

什么是服务器端渲染 SSR

如果将同一个组件渲染为服务器端的 HTML 字符串后，再将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序，这种方式，就是服务器端渲染。经过服务器端渲染的项目，当我们点击右键查看网页源代码，是可以看到页面内容代码的。

通俗来讲，就是服务器返回一堆html字符串，然后让浏览器显示。

服务器端渲染的特点

SSR的优点

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

• 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
  请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

• 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验。

SSR的缺点

• 开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。
• 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
• 更多的服务器端负载。本来是通过客户端完成渲染，现在统一在服务端 Node.js 中进行渲染，尤其是高并发访问的情况，会大量占用服务端CPU资源。

SSR vs CSR

SSR和CSR最大的区别在于前者的页面是服务器端直接返回HTML让浏览器直接渲染，而后者渲染是JS负责进行的。

数据请求方面，由服务器端请求数据比客户端请求数据要快。服务器端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。

html渲染方面，服务器端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么页面都没有的，就是用户看到的白屏。服务器端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。

SSR vs 预渲染

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染（Prerendering）。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack，你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。