Question

对于搜索引擎优化，我正在寻找一种通过现有API预呈现动态Nuxt.js路由页面的方法。

我尝试使用asyncData()函数在服务器端预渲染API的结果，但是在检查源代码时，它无法正常工作。

情况

使事情更清楚：

我使用第三方API来获取一本书的元数据
出于SEO的原因，我想使用动态Nuxt.js路由在服务器上预呈现结果（例如http://my-website.com/api/single-book/[ISBN_HERE]
我希望Google和其他搜索引擎抓取每个匹配查询的网站

编辑：按要求提供示例代码 动态路由（.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>

如何在服务器端预渲染Nuxt.js API路由

0 个答案: