先介绍一下什么是单页面应用（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主要是处理组件相关的事情

谢谢观看，如有不足，敬请指教