为何要用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的方法：

一、使用prerender-spa-plugin插件

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

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

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

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

二、官方提供的轮子在node端作SSR

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

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

三、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

做者：吸猫群众
连接：https://www.jianshu.com/p/6516f2a3ce36来源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。