Why is fetch not working correctly in nuxt?

Question

Node.js

Nuxt has an updated fetch that allows you to fetch data from the server directly in the component. So, I have a dynamic page. Here she is:

<template>
<div>
<component 
:is="res"
/>
</div>
</template>

<script>
import Card from '@/components/main/pages/Card'
import Post from '@/components/main/pages/Post'
import Tag from '@/components/main/pages/Tag'
export default {
    components: {
        Card,
        Post,
        Tag
    },
        async asyncData({store, params}) {
        const res = await store.dispatch('data/getData', params.slug)
        return {res}
    }
}
</script>

When I go to an article, there is a request for backing and sends me one of the categories and renders the desired component. When rendering a component, I make a request to the server in it to receive data (the new fetch allows you to do and receive data before rendering):

data () {
    return {
        data: ''
    }
},
async fetch() {
  const res = await this.$axios.$get(`/api/card/${this.$route.params.slug}`)
  this.data = res
},

I get the data as it should, everything is in order. But if I look at the source code, I won't see my component there. That is, it is no longer ssr, but spa. But another thing is that when I try to fetch data on the main page in a new way (and not using asyncData), then the data is present in the source code. Weird. That is, when the component is rendered, the data comes a little later and I notice it, because I see how the component starts to appear.

Answer 1

On the server side thisis not available, you need to get the same storefrom contextas inasyncData