nuxt的fetch钩子中发送请求不能在页面加载时把数据渲染到页面上

一、项目技术介绍

项目使用了vue以及nuxt2.js

二、遇到的问题

在nuxt的钩子函数fetch()中发送axios请求，数据无法在进入页面时被渲染到页面上。

附部分源码如下（接口地址删除了）

fetch部分：

async fetch() {
    const res1 = await this.$axios.get("接口1");
    if (res1.data.code == 200) {
      this.skill = this.skill.concat(res1.data.data);
    }
    const res4 = await this.$axios.get("接口2")
      if(res4.data.code == 200) {
        this.total = res4.data.data.records.length;
      }
      this.getData()
  },

getData()方法部分：

getData(){
      // 发送请求
      this.$axios
        .get("接口")
        .then((res) => {
          if (res.data.code == 200) {
          this.caseList.push(...res.data.data.records);
          }
        });
    },

三、解决历程

1.检查同步、异步

fetch()是一个异步函数，是否是getData()方法还没进行完毕？

经过排查测试，多次检查，发现问题并非出在同步、异步的问题上。

2.再次检查代码逻辑

3.重新查看官方文档，尝试增加fetchOnServer: false

增加此配置项，使其在服务器端不执行fetch方法，只有在客户端渲染的时候才会执行。

问题解决，由于接触不深，具体原理还未理解。

写下此篇文章，记录踩坑历史，方便日后自查。