В 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), то в исходном коде данные присутствуют. Странно. Тоесть когда компонент рендериться, данные приходят чуть позже и я это замечаю, т.к. вижу как компонент начинает появляться.
