使用nuxt做SSR

介绍

先来说说为什么要做 SSR（服务端渲染）。原因一般有两个：

1． Vue 单页面项目首页加载过慢，用几个插件的话通常需要 4-5 秒。

2． SEO 效果几乎没有。因为单页面项目是采用在客户端调用 JS 的方式渲染的，这就导致了搜索引擎爬取网站的时候内容几乎都是空的。搜索引擎就只能收录网站的首页，像网站内容比如文章之类的，别人是根本搜不到的。

如果你遇到了以上问题，那么你可能就需要做项目优化了。

Vue 项目优化方案有两个，分别为预渲染和服务端渲染。这两者都能解决以上的问题。区别在于：

l 预渲染是提前将需要优化的页面渲染成一个静态 html 文件，然后部署到服务器或者静态文件托管服务器，比如：GitHub。nuxt 中预渲染只需要使用命令：nuxt generate

l 服务端渲染是当请求发送到服务器时，服务器将请求的页面渲染成一个 html 文件然后返回。

l 对于页面内容不经常变化的网站就可以用预渲染，全部生成静态文件托管到 github 上。这样可以有效减少服务器的负担。Nuxt 官方文档网站就是使用了预渲染。

l 如果像博客这种经常会发表文章的网站就需要做 SSR 了，因为如果使用预渲染的话，每次发表文章都需要重新执行 nuxt generate 预渲染，然后重新部署。

Vue 项目做 SSR 同样的有两种方案：

第一个是 vue 自己提供的 SSR 方案，但是对项目的侵入性太强，整个项目都需要重构。

第二个就是 nuxt 框架了，简直就是做 SSR 的神器。

Nuxt 特性：

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES2015+ 语法支持

打包和压缩 JS 和 CSS

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

支持各种样式预处理器： SASS、LESS、 Stylus 等等

支持 HTTP/2 推送

但是 Nuxt 框架用的人还是太少，遇到问题很多都查不到，而且官方文档对一些 API 的解释过于简单，对小白来说非常不友好。接下来我就介绍一下我自己用 nuxt 做 ssr 遇到的一些问题及处理方法。

问题处理

Universal

做 SSR 必须要将 mode 设置成 universal，否则就无法实现 SSR 渲染。我自己在前几次部署项目的时候都是用的 SPA 模式，在 Google 上不管怎么搜都搜不到我的文章，只能看到我的博客首页，之后翻文档偶然看到这个 universal 模式才知道 SSR 要使用 universal。

asyncData

asyncData 方法只能在 nuxt 中的页面组件中使用，其他的功能组件是没有这个属性的。并且这个方法是在组件初始化之前被调用的，也就是 create 周期函数之前被调用。

这个方法也是做 SSR 必不可少的，它的主要作用就是在页面初始化之前将页面需要的数据获取到，然后在服务器端渲染到页面上并返回给客户端，这样搜索引擎爬到你的网站的时候就不是空白的了。

但是在我部署项目之后刷新页面出现了错误。错误截图我忘记截了，大概就是因为中文参数的问题。使用 asyncdata 方法之前我刷新页面是不会报错的，这个问题可让我困惑很久。后来我终于被我查到了原因，之前我没用 asyncData 跳转页面是用的 router 传参 param 接收，这样会自动对中文编码。而使用 asyncdata 之后我获取中文参数是直接在 context 中获取的，并没有进行中文编码，所以刷新之后会出现错误。

解决方法就是获取到中文参数后就是 url 编码：

let title = context.params.title;

let titleUrl = encodeURI (title);

使用 nuxt 做 SSR 关键点就是 Universal 模式加 asyncData 方法，其他问题大多就是使用 vue 本身的姿势有错，和 nuxt 关系不大。