Почему задержка вывода данных с api в Nuxt?

Question

[Analka]

использую Nuxt ssr

есть страница города

<template>
  <div class="app-page">
    <div class="content-header">
      <h1>Редактирование</h1>
    </div>
    <div class="content-body">
      <div class="row">
        <div class="col-xl-9">
          <div class="form-group">
            <input
              type="text"
              v-model="form.name"
              class="form-control"
              placeholder="Заголовок"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              v-model="form.slug"
              class="form-control"
              placeholder="Заголовок"
            />
          </div>
        </div>
      </div>
      <button class="btn btn-default" @click.prevent="save">Сохранить</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, useContext, useFetch, reactive } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { params } = useContext()

    const url = ref(`/v1/admin/country/${params.value.countryId}`)

    const form = reactive({
      name: '',
      slug: ''
    })
    const query = ref(null)

    const { $axios } = useContext()

    useFetch(async () => {
      try {
        query.value = await $axios.$get(url.value)
        form.name = query.value.data.name
        form.slug = query.value.data.slug
      } catch (error) {
        console.log(error)
      }
    })

    return { form }
  },
})
</script>

при переходе на эту страницу сперва поля пустые в формах, и через секунду-полсекунды в поля формы записываются полученные данные с api

Comments

[Олег Кириллов]

Грубо говоря, сперва рендерится "скелет", потом уже получаются данные. Загружайте данные в asyncData и это решит вашу проблему.