nuxt.js 初探解决 SPA应用SEO问题

现在vuejs 大行其道，我司也全部重构成SPA应用了，总的来说开发体验维护体验是大大的提升了。不过一个遗憾就是SEO很困难，尤其是我司的内容类网站，改版之后百度等搜索引擎收录很差，这不是小问题，必须得解决。
曾经试过几个方案：

phantomJS

使用phantomjs 把浏览器渲染的页面保存到web服务器，简单说就是一种生成静态页面的技术。
通过nginx检查文件是否存在，如果存在丢出静态页面。一定程度上也可以解决这个问题。不过弊端依然很明显，
生成好的静态页面要定期重新生成，因为UI随时可能发生变化。而且针对静态页面的路由在nginx上也需要复杂的配置。
好需要一个定时任务脚本，全站全部生成一遍，总感觉稍微有点蛋疼。
相关文章：http://www.jianshu.com/p/6be9424a358d 总的来说不够友好。

nuxtjs

nuxt.js https://nuxtjs.org 可以先撸一遍文档有中文的，这是专门解决vuejs 应用ssr方案的框架。如果你的项目正在从零开始，那么非常推荐直接只用这个框架搭建项目。在这就不做具体介绍。
先说说他实现原理，nuxt.js 项目在开发体验上基本上跟vuejs全家桶开发单页面是非常一致的。
他简化了路由复杂配置，直接在pages目录下面生成对应的文件夹就好了，这一步让人很省心。
那么他是如何把以往浏览器渲染的内容写入“组件”内的呢？这个问题我现在还没看懂，但是有一点是肯定的，那就是需要nodejs 写入文件，最终拼接处的页面是动态页面。这种项目，发布运行是一定需要nodejs环境支持的，与之前我们 npm run build 一堆纯静态文件，只需要nginx就够，是不一样的。从性能上来讲应该更消耗资源，当然一定可以通过nginx实现动静分离的。
其实到现在我只是简单尝试了一下，背后原理优缺点还没搞清楚，在啃几天看看，总之从体验上来说是非常棒的，SEO问题是可以完美解决的。先贴一段代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<template>
<div class="VueToNuxtLogo">
<ul>
{{ lists.title }}
</ul>
<h1>这货真要渲染吗 {{ name }}</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
msg: null,
lists: {}
}
},
asyncData ({ isStatic, isServer }) {
return axios.get('http://domain/api/post/123456').then((data) => {
return {
name: isStatic ? 'static' : (isServer ? 'server' : 'client')
}
})
},
methods: {
get_data () {
axios.get('/api/post/123456').then((data) => {
this.lists = data.data.result
this.msg = data.data.result.title
})
}
},
created () {
this.get_data()
}
}
</script>
<style>

</style>

这个组件已经实现了，服务端渲染和客户端渲染混合显示，官方的例子中这样的不多，值得注意的是 asyncData 异步数据，不知道为什么会取这个名字，不应该是同步数据更好理解吗...没错这货就是负责把数据塞到html源代码中的。不但在html上有这些数据，他还会把这些数据静态到相关js代码中如下图

image.png

也就是这个html文档会出现双份的数据，不知道这样会不会造成流量过大，尤其是那种内容很多的页面，这个size可就翻倍了。也许应该有配置关掉这个把。

暂时先写到这，欢迎一起研究的小伙伴随时交流。