公司的网站重构，要求支持SEO，必须用服务端渲染。听到这个消息的时候，我开始兴奋起来了，因为ssr这个东西出来了这么久但是我还没有亲手实践过，这次借助技术调研这个机会搞一下服务端渲染。
服务端渲染，顾名思义是将html模版拼接在服务端的模版上，在调用服务的时候，从服务端吐出页面。可以直接在浏览器查看网站源码中看到，页面是否有内容。这两年流行的spa单页面技术，由于数据是异步获取的，爬虫爬不到异步数据，所以SEO很差，服务端渲染的话，请求的内容直接在服务端就渲染好了，所以对提高网站的搜索质量有很大帮助。
像java的jsp，php的模版都是服务端渲染。但是对于前端工程化来说，服务端渲染都是在nodejs服务上进行的，网上调研了下常用的服务端渲染解决方案，有vue-cli3脚手架搭配使用，有nuxt。各自调研了下，发现nuxt对于我来说可能更加适合。有专门的脚手架工具，按照指令安装即可，文档也非常友好，模版语法在vue上加了几个新的钩子，用来处理服务端渲染的部分。
安装好了以后目录是这样一个结构：
- nuxt 是编译后产生的东西。(静态文件，服务端文件)
- api是我新建的一个存放接口目录的文件夹
- assets是脚手架生产的存放静态css，图片的文件夹
- components是放通用组件的文件夹，在这个文件夹内，组件不会有asyncData这个方法去请求数据。
- layouts是组织应用的布局组件，不可更改，里面放的footer，header一类的组件，基本不用动。
- middleware是用于存放应用的中间件，一般放的是nodejs代码。
- pages是网站的目录结构。里面自带一个index.vue，每新建一个目录，里面得有一个index.vue的文件夹作为根目录，nuxt会基于pages的结构生产路由。
- plugins是用于组织那些需要在
根vue.js应用实例化之前需要运行的 Javascript 插件。我存放的有axios，elementui的东西。 - static静态文件目录
static用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径/下，不可更改。 store目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在store目录下创建一个index.js文件可激活这些配置，不可更改，我用来存放封装的axios和vuex。nuxt.config.js文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置，这个是核心文件，里面可以自定义配置nuxt 。
服务端渲染请求的异步内容放在asyncData这个钩子方法里来做，切记！要想给爬虫爬到异步数据或者组件，加载方法一定要放到created钩子里面写，不能放mounted里。如下图：
带参数跳转用： this.$router.push({name: ‘map-mapView’, query: {id: xxx}}这种目录名-目录详情的方式，如果想定制化url，比如 http://www.xxx.com/id/3 ，这样history模式的url，可以在目录底下新建一个_id.vue 文件夹，用这样
this.$router.push({
})的方式跳转就可以啦。
其他的方式就跟vue一样的正常使用即可。
参考文章：zh.nuxtjs.org/guide#%E9%9…
