Nuxt.js 在动态路由_id.vue里使用asyncData，为什么会执行2次？

Question

# Nuxt.js 在动态路由_id.vue里使用asyncData，为什么会执行2次？而且2次是同时执行的

async asyncData(context) {
        console.log("asyncData runing");
        let categoryListData = await axios({
            method: "POST",
            url: api.categoryList,
            headers: {
                authorization: api.authCode,
                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            transformRequest: [data => Qs.stringify(data)],
            data: {}
        }).then(response => {
            let data = response.data;
            return data.data.rows;
        }).catch(error => {
            console.log("error:", error);
        });
        context.store.commit('getCategoryList', categoryListData)
        return;
    },

Answer 1

在 Nuxt.js 中，动态路由组件的 _id.vue 文件可以使用 asyncData 方法来获取数据并渲染页面。当用户首次访问该页面时，Nuxt.js 会执行 asyncData 方法来获取数据并将其注入到组件的数据中，然后再渲染页面。这个过程只会执行一次，即服务器端渲染。

当用户在浏览器中通过路由链接访问该页面时，Nuxt.js 会先进行客户端渲染，然后再获取数据并重新渲染页面。这个过程中，asyncData 方法会被执行两次，分别在客户端和服务器端执行。

这个问题的出现可能与 Nuxt.js 客户端和服务器端渲染机制有关。客户端渲染时，Nuxt.js 会首先执行一次 asyncData 方法，以获取页面需要的数据。然后，当服务器返回数据时，Nuxt.js 会再次执行 asyncData 方法，以获取最新的数据并渲染页面。这就是为什么 asyncData 方法会被执行两次。

如果你希望只在服务器端执行 asyncData 方法一次，可以在 nuxt.config.js 文件中配置 fetchOnServer 为 true，例如：

export default {
  generate: {
    fetchOnServer: true
  }
}

这样，当用户在浏览器中通过路由链接访问该页面时，Nuxt.js 会先进行服务器端渲染，然后再进行客户端渲染，这样 asyncData 方法就只会被执行一次。