前言
现在我们的项目大多数都是SPA（单页面应用），感觉单页面应用比之前的模板渲染要好很多，首先单页面应用是前后端分离，架构清晰，前端负责交互逻辑，后端负责数据，前后端单独开发，独立测试。但是，SPA不利于SEO(搜索引擎优化),那么为什么要做SEO？做SEO有什么好处？简单来说SEO是一种利用技术手段提升网站在搜索引擎之中的排名的方式，让搜索引擎更为信任网站，通过提升排名获得更多网站流量。目前大部分的Vue项目本质是 SPA 应用，React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中，我们有 SEO 的需求，我们需要搜索引擎更多地抓取到我们的项目内容，此时我们需要SSR。SSR保证用户尽快看到基本的内容，也使得用户体验性更好。Vue官网提供了Vue SSR（Server Side Render）指南服务端渲染，即：网页是通过服务端渲染生成后输出给客户端。比如JSP、PHP、JavaWeb等都是SSR架构，也就是服务端取出数据和模板组合生成 html 输出给前端，前端发生请求时，重新向服务端请求 html 资源，路由也由服务端来控制。 那么我们本次主要针对Vue官网推荐的服务端渲染框架Nuxt.js讲解。
服务端渲染(Server-Side Render)介绍
客户端渲染(Client-Side Render)：客户端渲染，页面初始加载的 HTML 页面中无网页展示内容，需要加载执行 JavaScript 文件中的 Vue 代码，通过 JavaScript 渲染生成页面，同时，JavaScript 代码会完成页面交互事件的绑定。 服务端渲染：所有数据请求和 html 内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求。
Nuxt.js介绍
- Nuxt.js是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用
- 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
架构图
优点
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus等等
- 首屏的加载时间优化
- 进行SEO优化
- 无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行
- 无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
- 内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件
Nuxt.js和纯Vue项目对比
1. build后目标产物不同
- vue: dist
- nuxt: .nuxt
2. 网页渲染流程
- vue: 客户端渲染，先下载js后，通过ajax来渲染页面；
- nuxt： 服务端渲染，可以做到服务端拼接好html后直接返回，首屏可以做到无需发起ajax请求；
3. 部署流程
- vue： 只需部署dist目录到服务器，没有服务端，需要用nginx等做Web服务器；
- nuxt： 需要部署几乎所有文件到服务器（除node_modules，.git），自带服务端，需要pm2管理（部署时需要reload pm2），若要求用域名，则需要nginx做代理。
- 本地运行npm run build打包，然后把.nuxt、static、nuxt.config.js、package.json、package-lock.json上传到服务器,上传好后，运行
npm install安装依赖 最后运行npm run start启动项目。 - 另外一种方法在服务器上打包上传整个项目到服务器上，当然像node_modules、.idea之类的除外，接着依次运行：
npm install|npm run build|npm run start
注意: 如果有node-sass模块，安装过程可能会报错，运行npm install node-sass --unsafe-perm --save-dev来单独安装这个模块就好了。
- netstat -lnp|grep 8080 // 查看8080端口是否被占用
- 使用pm2守护进程
pm2 start npm --name "nuxt" -- run start - npm install core-js@2 // nuxt 部署报错，缺少core-js
- pm2常用命令
pm2 list // 查看任务列表 pm2 stop app_name|app_id // 停止指定name或者id的任务 pm2 stop all // 停止所有任务 pm2 delete app_name|app_id // 删除指定name或者id的任务 pm2 delete all // 删除所有任务 pm2 logs // 查看日志 pm2 kill // 杀死pm2进程
4. 项目入口
- vue: /src/main.js，在main.js可以做一些全局注册的初始化工作；
- nuxt: 没有main.js入口文件，项目初始化的操作需要通过nuxt.config.js进行配置指定。
环境搭建
方式一：使用prerender-spa-plugin插件获得SSR的效果
严格上来说，此种实现方式并非叫做 SSR，而是预渲染。不过效果上是一样的，甚至某种程度上来说可能要比 SSR 更好。相比官方提供的 SSR 繁琐配置，prerender 配置更简单快捷，如无特殊要求只需在 webpack 中加一个 plugin 的配置即可。 但是此方式只支持h5 history方式的路由，不支持hash方式的路由。
方式二：使用官方提供的轮子在node端做SSR
本示例只说明如何完成一个相对基础的 SSR，vuex以及缓存等可参考官网说明。
