首先我们来科普一下几个概念：

1）SPA：单页面应用，基于vue框架开发的项目很多都属于单页面应用；
2）SSR ：server side rendering, 服务端渲染，额，这个不是订阅那个SSR，我一开始就弄混了；
3）Prerender：预渲染，Prerender.io是基于Node.js的程序，它可以让你的JavaScript网站支持搜索引擎，社交媒体，并且它兼容所有的JavaScript框架和库。它采用PhantomJS渲染JavaScript的网页然后呈现为HTML。此外，我们可以实现的prerender服务层来缓存访问过的页面，这将大大提高性能；
4）SEO：搜索引擎优化，指通过对网站进行站内优化、修复和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。
5）Nuxt：是一个基于 Vue.js 的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置，可以为基于 Vue.js 的应用提供生成对应的静态站点的功能。

SPA 进化到如今，已经从「拼能力」逐渐过渡到「拼体验」,大家也把目光转向了 SPA 相对多页后端渲染应用的两个最大缺陷

首屏时间
SEO（Search Engine Optimization）

这次我主要讲解决SEO的问题，下面请看思维导图:

Nuxt.js 服务端渲染/静态资源生成器方案

介绍

从头搭建一个服务端渲染的应用是相当复杂的。Nuxt.js 让这一切变得简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。

配置

Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
可自定义动态路由，嵌套路由甚至给路由跳转定义过度动效

视图

方便灵活的自定义应用模板、页面、布局和HTML头部等内容。

异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

资源文件

区分Webpack构建资源和静态资源
资源文件随心管理，对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。

插件

可以配置需要在根vue.js应用实例化之前需要运行的 Javascript 插件，可以是你自己写的库或第三方模块。

模块

模块是Nuxt.js扩展，可以扩展其核心功能并添加无限的集成。

Vuex状态树

对于每个大项目来说，使用状态树 (store) 管理状态 (state) 十分有必要。Nuxt.js内核实现了Vuex。

命令和部署

Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。
Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署。

Prerender（将JS网站生成静态HTLM被搜索引擎完美地抓取）

介绍

在服务器上安装的Prerender.io中间件将检查每个请求，以查看它是否是来自爬网程序的请求。如果它是来自爬虫的请求，则中间件将向Prerender.io发送请求以获取该页面的静态HTML。如果没有，请求将继续到您的正常服务器路由。爬虫永远不会知道您正在使用Prerender.io，因为响应始终通过您的服务器。

谷歌批准

Google编写了Prerender.io遵循的AJAX抓取规范，因此Google和其他搜索引擎可以保证您的网站正确抓取

服务端中间件

拥有多种编程语言中间件：ExpressJS、Rails(Ruby)、Nginx、Apahe等

价钱

SSR （server side rendering, 服务端渲染）方案

介绍

将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。

服务器端渲染

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。

使用服SSR时需要权衡之处

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集)，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。

总结

综上所述3种方案

Nuxt.js（对后期可维护性，以及开发效率会比较高，可轻松展核心插件）
Prerender（可作为临时解决SEO的方案，但不是长期和倾向完美的方案）
SSR（对研发团队要求高，对服务器要求高。）