Возможность динамического c контента на статически сгенерированных html страницах из Nuxt с ответами от API REST

Question

Мы много работаем с Vuejs как одностраничное приложение (SPA). Vue отвечает многим требованиям, очень популярен.

С точки зрения SEO и ссылок в социальных сетях возникли некоторые проблемы. Мы также хотим повысить качество приложений и поэтому включили в короткий список Nuxt. В частности, функция генерации страниц Stati c.

Подход заключается в размещении страниц в дружественных для SEO страницах S3 или GitHub.

Есть ли способ вставить Vuejs на статически сгенерированные страницы Nuxt для выполнения вызовов REST API, таких как для поиска товаров и их результатов? Суть в том, чтобы получить динамический c для невозможных страниц, сгенерированных c. Например, для поиска товаров, et c. Я говорю о смеси предварительно созданных страниц c, на которых может быть выполнено содержимое динамического c Vuejs.

Кстати: мы не говорим о создании динамического содержимого. c маршруты.

Answer 1

конечно можно. Особенно в последних версиях Nuxt (v2.12) они модифицируют хук fetch() для извлечения асинхронных c данных из API при загрузке страницы или запускаются событием:

  export default {
    async fetch() {
      try{
        const query = await this.$prismic.api.query(this.$prismic.predicates.at('document.type','product'))
        this.docs = query.results
      }   
      catch (e) {
        console.log(e)
      }
    }, fetchDelay: 500,

    data(){
      return{
        docs: []
      }
    }
  }

В этом Например, я извлекаю данные из Prismi c API.

Затем в своем шаблоне вы можете использовать приятные методы, такие как <button @click="$fetch">, чтобы инициировать вызовы, или $fetchState.pending, чтобы проверить, выполняются ли ваши звонки. завершено.

Подробнее здесь: https://nuxtjs.org/api/pages-fetch/