为什么要用Nuxt.js？

现在我们的项目大多数都是spa（单页面应用），感觉单页面应用比之前的模板渲染要好很多，首先单页面应用是前后端分离，架构清晰，前端负责交互逻辑，后端负责数据，前后端单独开发，独立测试。

但是，SPA不利于SEO（搜索引擎优化）。

那么为什么要做SEO？做SEO有什么好处？简单来说SEO是一种利用技术手段提升网站在搜索引擎之中的排名的方式，让搜索引擎更为信任网站，通过提升排名获得更多网站流量。

目前大部分的Vue项目本质是 SPA 应用，React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。

在我们开发的过程中，我们有 SEO 的需求，我们需要搜索引擎更多地抓取到我们的项目内容，此时我们需要SSR。SSR保证用户尽快看到基本的内容，也使得用户体验性更好。

SSR： 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。比如JSP、PHP、JavaWeb等都是SSR架构，也就是服务端取出数据和模板组合生成 html 输出给前端，前端发生请求时，重新向服务端请求 html 资源，路由也由服务端来控制。

我们需要这样的代码：

渲染后的页面

实现SSR的方法：

1、使用prerender-spa-plugin插件

如果你使用 webpack，你可以使用prerender-spa-plugin轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上，作者是 Vue 核心团队的成员。

这种实现方式并不叫 SSR，而是预渲染。不过效果上是一样的，甚至某种程度上来说可能要比 SSR 更好。相比官方提供的 SSR 繁琐配置，prerender 配置更简单快捷，如无特殊要求只需在 webpack 中加一个 plugin 的配置。

这种方法简单、易上手、无需配置就能满足基本的 SEO 要求，但是不适合频繁变动的页面，因为预渲染只是类似于快照的概念。

具体配置可自行查看Prerender SPA Plugin

2、官方提供的轮子在node端做SSR

相对于 prerender 插件来说，SSR 上手真的超级复杂，有兴趣可以自行查看Vue SSR 指南

这种方法可以做到真实数据实时渲染，完全可供SEO小蜘蛛尽情的爬来爬去，完全前后端同构，路由配置共享，不再影响服务器404请求，但是配置比较麻烦、处理流程比较复杂 (比对预渲染插件，复杂太多)约束较多，对服务器会造成较大的压力，服务器成本太高了。。

3、Nuxt.js

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

综上3种方法，我选择了第三种——Nuxt.js

Nuxt.js 是一个 Node 程序，必须使用 Node 环境。我们对 Nuxt.js 应用的访问，实际上是在访问这个 Node.js 程序的路由，程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码，而路由是由 Nuxt.js 约定好的 pages 文件夹生成的。

参考：实现基于Nuxt.js的SSR应用、Vue SSR 指南以及让vue-cli初始化后的项目集成支持SSR