这两个方法都会在组件加载之前被调用，它们的职责各有不同， asyncData 用来异步的进行组件数据的初始化工作，而 fetch 方法偏重于异步获取数据后修改 Vuex 中的状态。
我们在 Nuxt.js 的源码 util.js 中可以看到以下方法：
export function applyAsyncData (Component, asyncData = {}) { const ComponentData = Component.options.data || noopData Component.options.data = function () { const data = ComponentData.call(this) return { ...data, ...asyncData } } if (Component._Ctor && Component._Ctor.options) { Component._Ctor.options.data = Component.options.data } }
这个方法会在 asyncData 方法调用完毕后进行调用，可以看到，组件从 asyncData 方法中获取的数据会和组件原生的 data 方法获取的数据做一次合并，最终仍然会在 data 方法中返回，所以得出， asyncData 方法其实是原生 data 方法的扩展。
经过以上四步后，接下来就是渲染组件的工作了，整个过程可以用下图表示：
（图片来源：Nuxt.js 官网）
如上文所述，在 .nuxt 目录下，你可以找到 server.js 文件，这个文件封装了 Nuxt.js 在服务端渲染的逻辑，包括一个完整的 Promise 对象的链式调用，从而完成上面描述的整个服务端渲染的步骤。
Nuxt.js 的一些使用技巧
nuxt.config.js 的配置
nuxt.config.js 是 Nuxt.js 的配置文件，可以通过针对一系列参数的设置来完成 Nuxt.js 项目的配置，可以在Nuxt.js 官网 找到针对这个文件的说明，下面举例一些常用的配置：
head: 可以在这个配置项中配置全局的 head ，如定义网站的标题、 meta ，引入第三方的 CSS、JavaScript 文件等：
head: { title: '百姓店铺', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'applicable-device', content: 'pc,mobile' }, ], link: [ { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'} ], script: [ {src: 'https://code.jquery.com/jquery-3.1.1.min.js'}, {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'} ] },
build: 这个配置项用来配置 Nuxt.js 项目的构建规则，即 Webpack 的构建配置，如通过 vendor 字段引入第三方模块，通过 plugin 字段配置 Webpack 插件，通过 loaders 字段自定义 Webpack 加载器等。通常我们会在 build 的 vendor 字段中引入 axios 模块，从而在项目中进行 HTTP 请求（ axios 也是 Vue.js 官方推荐的 HTTP 请求框架）。
build: { vendor: ['core-js', 'axios'], loaders: [ { test: /\.(scss|sass)$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, { test: /\.(png|jpe?g|gif|svg)$/, loader: 'url-loader', query: { limit: 1000, name: 'img/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 1000, name: 'fonts/[name].[hash:7].[ext]' } } ] }
css: 在这个配置项中，引入全局的 CSS 文件，之后每个页面都会被引入。
router: 可以在此配置路由的基本规则，以及进行中间件的配置。例如，你可以创建一个用来获取 User-Agent 的中间件，并在此加载。
loading: Nuxt.js 提供了一套页面内加载进度指示组件，可以在此配置颜色，禁用，或是配置自定义的加载组件。
env: 可以在此配置用来在服务端和客户端共享的全局变量。
目录即路由
Nuxt.js 在 vue-router 之上定义了一套自动化的生成规则，即依据 pages 的目录结构生成。例如，我们有以下目录结构：
这个目录下含有一个基础路由（无参数）以及两个动态路由（带参数），Nuxt.js 会生成如下的路由配置表（可以在 .nuxt 目录下的 router.js 文件中找到）：
routes: [ { path: "https://www.jb51.net/", component: _abe13a78, name: "index" }, { path: "/article/:id?", component: _48f202f2, name: "article-id" }, { path: "/:page", component: _5ccbb43a, name: "page" } ]
对于 article-id 这个路由，路径中带有 :id? 参数，表明这是一个可选的路由，如果要将其设为必选，则必须在 article 的目录下添加 index.vue 文件。
再看下面一个例子: