Как предварительно обработать маршруты API Nuxt. js на стороне сервера - PullRequest
Новая
       31

Как предварительно обработать маршруты API Nuxt. js на стороне сервера

1 голос
/ 15 февраля 2020

Для поисковой оптимизации, я ищу способ предварительного рендеринга динамических c Nuxt. js маршрутизации страниц через существующий API.

Я пытался использовать функцию asyncData() предварительно обработать результаты моего API на стороне сервера, но при проверке исходного кода это не работает должным образом.

Ситуация

Чтобы сделать вещи более clear:

  • Я использую сторонний API для извлечения метаданных отдельной книги
  • С использованием динамических c Nuxt. js маршрутов, я хотел бы предварительно отрендерить результат на моем сервере, по причинам SEO ( например, http://my-website.com/api/single-book/ [ISBN_HERE]
  • Я хочу, чтобы Google и другие поисковые системы сканировали веб-сайт для каждого соответствующий запрос

Редактировать: пример кода по запросу Dynami c route (. vue) 

<template>
  <div>
      <h2>
          Load books by ISBN (currently requesting)
      </h2>

      <ul>
          <li v-for="(product, i) in products" :key="i">
              <b>(#{{product.id}})</b> {{product.title}}
              <br>
              {{product.shortDescription}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    async asyncData({ params, $axios }) {
        // get the requested isbn from the params.
        let query = params.isbn;
        // api url
        let url = `http://bookfrontapi.test/bol-api/?q=${query}`;
        
        // make the request asynchronously
        const res = await $axios.get(url);
        // fetch the results
        const data = res.data;

        const products = data.products;

        return {
            products
        }
    }
}
</script>

<style>

</style>
...