目录

1、背景简介

在针对大部分的企业应用、品牌官网、博客系统等，都需要用到SEO,其最终目的是为了让用户搜索到自己的网站，或者url。同时如何做好SEO，这是一门专业的只是领域，笔者也是参考了一些SEO相关的书籍，但是在这里我们并不会深入的说明SEO的原理和一些大搜索引擎网站的爬虫技术，回归主题，我们更多的是来探讨一些如今炒的沸沸扬扬的前端框架vue如何做服务端渲染(SSR)。

---

2、项目初始化

在传统的vue-cli脚手架，只是做静态页面的渲染，所以这里我们用到的是另外一个脚手架nuxt.js,Nuxt官方文档，同时也是Vue官方推荐的一个脚手架，安装好npm和node之后运行命令：

npm install -g vue-cli

我们依然要依赖于vue-cli的脚手架，不过在初始化项目的时候我们在执行如下命令：

vue init nuxt/starter

Nuxt官方提供的命令是vue init nuxt-community/starter-template <project-name>。两者相同。
然后需要输入一系列信息，也可以通过不断的回车来确定即可。

下面执行安装包，

npm i

npm i是npm install的简写形式，安装过cnpm的可以直接执行cnpm i。
初始化完成之后会看到如下的目录文档解构：

和vue-cli的目录结构有所不同。

assets/资源目录
components/组件
layouts/ 布局组件
middleware/ 中间件
pages/ 页面配置(会用这个目录的文件自动生成路由)
plugins/ 插件目录
static/ 静态文件目录
store Vuex 状态树
详细的文件夹说明请参考官方的文档，虽然官方对一部分的文件夹的说明不是很详细，常用的大部分能够说明了。
nuxt.config.js为配置文件。可以通过自行配置很多参数，和服务代理。

开发环境下启动项目：

npm run dev

生产环境启动项目，先执行：

npm run build

在启动项目：

npm run start

关于项目的详细开发我们就不一一说明了，vue的语法相同，不过对于nuxt来说多了一些API，与此同时在components组件模块的一部分钩子函数不能调用，需要借助nuxt自己的API来实现。

3、服务器渲染SSR

既然在服务端渲染，毫无疑问我们需要使用node来启动服务。

通常情况下，我们需要从后台的接口获取数据并显示在页面上的时候，我们通常需要用到异步数据获取，常用的AJAX等，这样当大型搜索引擎的爬虫来爬我们的网站时，并不会抓到我们异步请求回来的数据，(谷歌据说已经加入了异步数据的抓取)，很多情况下我们只能看到一些静态内容的渲染，所以在nuxt中提供了asyncData这个API，需要注意的是该方法只能在(页面组件)中使用，也就是说只能在pages目录下的文件使用，components等其他文件夹下面的组件不能使用，该方法会在页面渲染之前调用，所以我们在该方法中使用异步请求来获取数据，这里我们用到的是axios，其使用方法很简单：

asyncData (context,callback){
    //context用来接收多个上下文参数，如路由等，callback用来回调数据到data中。
    axios.post(url,data).then(function (response) {
        callback(null, {
            //这里将数据回调到data中
        })
    }).catch(function (error) {
        //console.log(error);
    });
}

此时我们的页面内容就可以通过异步的形式获取参数渲染到页面上，当spider来爬我们的网页页面的时候也能抓到我们异步请求回来的数据。

但是，需要注意的是，asyncData方法中的js并不是在浏览器中执行，而是在我们的后天node中执行，当我们console.log一个信息的时候，并不能通过浏览器的开发者选项来进行查看，而是通过我们启动node服务的“终端”或者“命令提示符”中进行查看。调试的时候也是如此。

4、TDK优化

关于TDK（Title、description、Keywords）优化已经是很早以前就有的一种SEO优化方案，Keywords属性在一些爬虫引擎中可能不再使用，但是写上也没什么，在nuxt的配置文件nuxt.config.js文件中可以配置我们的通用的属性，另外我们还可以自定义一些别的属性，同时在每个单独的页面中我们可以通过nuxt的API head 方法自定义TDK这样就更好的去做我们的SEO优化。

5、总结

关于网站的SEO优化，其实有很多值得说的，首先要想好好去做这一块，就要先了解爬虫的一些原理，另外比较重要的是网站的权重，过多的一些外链可能会降低权重，内容的丰富性，等等都会影响到网站的排名，关键词对于SEO来说是至关重要的东西，但是做好关键词并非一件容易的事，同时也可以通过对一部分的链接进行阻止爬虫，来优化网站的链接。