asyncData is mentioned in the document:

asyncData is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route.

asyncData is obtained before the component is loaded and can be executed on the server side or when the route is redirected.
so the page jump will be like this. asyncData should be used to affect the content of SEO, that is, the content that needs to be read by the crawler, otherwise, just let the browser send an ajax request.
if you want the browser to first show that the page without data is sending a request, you can ask for asyncData when the browser jumps, and send a ajax request when the browser jumps.
the specific method is:

// process.serverSSRasyncData
 asyncData (context) {
    if(process.server){
    // ,{userInfo:{name:"fake",age:10"}
    }
  }

then decide whether or not to initiate a request based on whether a value is obtained in mounted

mounted(){
if(!this.userInfo){
// data
}
}

it looks cumbersome, but I can't think of any other way. Personally, if the data needs to be used for SEO, or there is no data affecting rendering, use asyncData , otherwise, let the browser send an ajax request. You feel that it may take some time for Catton to indicate that this request may take some time, so nodejs will have to wait as long as it takes to render on the server, and users will think that your page loads very slowly. So try not to use asyncData... Personal suggestion
official example is to get the list. If you don't get the search engine in asynData, you won't see the content.

how do you solve this problem?