先介绍一下什么是单页面应用（SPA）
随着React、Vue等框架的流行，越来越多的网站开始使用这些框架编写，
React、Vue都有自己的路由，使用了路由制作的网站其实就是单页面应用。
单页面项目打包出来只有一个html文件，看似各个页面之间无刷新切换，
其实是通过hash，或者history api来进行路由的显隐，并通过ajax拉取数据来实现响应功能。
因为整个webapp就一个html，所以叫单页面。
单页面应用虽然带来了一部分用户体验的提升，但也带来了新的问题：
1.首页白屏问题
因为SPA所有的内容都是由客户端js渲染出的来，就会导致js体积过大，
客户端渲染也需要一定的时间，这两者的时间在浏览器上所带来的就是一段时间的白屏等待。
2.SEO问题
由于SPA所有的内容都是由js渲染出来的，html中其实算是空白一片，
对于爬虫来说无论爬什么地址爬到的就是一片空白
由于这类项目需要页面加载完成后再异步获取数据渲染，因此大部分搜索引擎无法获取到这类项目的内容。
Vue SSR正是基于此类需求而给出的一种技术方案。利用nodejs搭建页面渲染服务，
在服务端完成之前需要在客户端完成的页面渲染工作，输出给SEO更友好的页面。
SSR简介
1、SSR全拼是Server-Side Rendering，服务端渲染
所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，
然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。
2、为什么选择SSR
第1点：满足seo需求，传统的spa数据都是异步加载的，爬虫引擎无法加载，
需要利用ssr将数据直出渲染在页面源代码中。
第2点：更宽的内容达到时间（首屏加载更快），当请求页面的时候，服务端渲染完数据之后，
把渲染好的页面直接发送给浏览器，并进行渲染。浏览器只需要解析html不需要去解析js。
Nuxt.js简介
Nuxt.js主要是包含以下几个方面
1、vue 2
2、vue router
3、vuex
4、vue server renderer
5、vue-meta
Nuxt.js目录结构
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 该目录是组件目录，用于组织应用的Vue.js组件。
Nuxt.js 不会扩展增强该目录下， Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware // 用于存放中间件
|-- pages // 该目录是页面目录，用于组织应用的路由及视图。
Nuxt.js 框架读取该目录下’所有的 .vue 文件并自动生成对应的路由配置。说明：若无额外配置，该目录不能被重命名。
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 该目录是静态文件目录，用于存放应用的静态文件，
此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。说明：若无额外配置，该目录不能被重命名。
|-- store // 该目录是状态树目录，用于组织应用的 Vuex 状态树 文件。
Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
注意事项
在生命周期mounted中发起请求，在浏览器端可以渲染，但是在服务器端不渲染 代码如下
// async mounted() {
// //服务器端渲染不执行这个过程 需要换个方式
// let {status,data: { list },} = await axios.get("/city/list");
// if (status === 200) {
// this.list = list;
// }
// },
//另外一种写法
async asyncData() {
let {
status,data: {
list },} = await axios.get("http://localhost:3000/city/list");
if (status === 200) {
return {
list,
};
}
},
//完美解决
1、通信方式有两种一种asyncData还有一种是fetch，其中fetch主要是处理和vuex相关的事情
而asyncData主要是处理组件相关的事情
谢谢观看，如有不足，敬请指教