最近Vue项目的网站butterpig上线有一段时间了。但是一直没有被收录，思前想后，发现会不会是seo没有优化的原因。果然百度之后，发现vue的spa单页面应用对seo极其的不友好，百度的爬虫并不会等到js文件加载渲染完成页面后，再爬内容。因此单页面网站的内容对于百度爬虫来说，就是空的，基本上啥也没有。相当蛋疼的事情。对于vue react angular等框架开发的单页面应用，想彻底解决seo问题，还是要实现ssr服务端渲染。但是对于一个已经做好的网站，再去改成服务端渲染，实在是劳民伤财。只有使用一个折中的方案，就是预渲染。那么ssr服务端渲染和prerender预渲染的区别主要在哪，以及如何选择，下面进行分析。

先阐释相关的专业词汇：

（1）SPA（单页面应用）：只有一个主要的web页面的应用，其中的页面跳转，仅仅更新局部的模板内容，外层的公共内容只加载一次就行，适用性很广，特别是门户网站或者后台管理系统中。例如b站也是用vue搭建的单页面应用。

  优点：页面之间切换快，减少了服务器的压力。
  缺点：首屏打开慢，不利于SEO搜索引擎优化，利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。

（2）SEO（搜索引擎优化）：利用例如百度等搜索引擎对于网站的收录规则，来有针对性的提高网站的搜索排名等，让网站拥有更高的曝光率。

（3）SSR（服务端渲染）：因为SPA单页面应用，是通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO了，为了解决这个问题，SSR服务端渲染应运而生。SSR的出现再很大程度上改善了了SPA首屏慢的问题，又极大降低了SPA单页面应用对于SEO的先天不利影响。

  优点：更快的响应时间，不用等待所有的js都下载完成，显示器便能显示出比较完整的页面；更好的实现网站seo，
  我们可以将承载了seo信息的页面直接在服务端渲染成html文件再发送给用户，从而保证了搜索引擎可以爬取到数据。
  缺点：显著提高了服务端中CPU和内存的耗费。

（4）prerender（预渲染）：预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。从而达到为spa单页面应用优化seo的目的。

使用ssr服务端渲染还是prerender预渲染

vue官方认为，如果只是为了满足spa单页面应用中少量的seo推广需求，应用中路由不多，不会存在几千个路由的情况下，推荐使用预渲染就行了。因为一个应用已经开发完成，再转到ssr服务端渲染并不是一件容易的事，是相当费时费力的。而且还存在学习成本问题。但是使用预渲染插件，几乎就可以不用改动任何项目结构和代码，实现需求。所以对于一些小网站，直接改成预渲染来提高seo能力是很好的选择，几乎零成本。