Почему неправильно работает fetch в nuxt?

В nuxt появился обновленный fetch, который позволяет получать данные с сервера непосредственно в компоненте. У меня есть динамическая страница. Вот она:
<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>

При переходе на статью, идет запрос на бек и отправляет мне одну из категорий и рендерит нужный компонент. При отрисовке компонента, я в нем делаю запрос на сервер для получения данных (новый fetch это позволяет делать и получать данные до рендеринга):
data () {
    return {
        data: ''
    }
},
async fetch() {
  const res = await this.$axios.$get(`/api/card/${this.$route.params.slug}`)
  this.data = res
},

Я получаю данные как надо, все в порядке. Но если я посмотрю на исходный код, то там я не увижу своего компонента. Тоесть это уже не ssr, а spa. Но еще дело в том, что когда я пробую на главной странице фетчить новым способ данные (а не с помощью asyncData), то в исходном коде данные присутствуют. Странно. Тоесть когда компонент рендериться, данные приходят чуть позже и я это замечаю, т.к. вижу как компонент начинает появляться.
  • Вопрос задан
  • 1012 просмотров
Пригласить эксперта
Ответы на вопрос 1
На стороне сервера this не доступен, нужно так же получать store из context как в asyncData
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы