在Nuxt静态生成的html页面上动态内容的可能性以及REST的响应

Question

我们大量使用Vuejs作为单页应用程序(SPA)。Vue满足许多要求是非常流行的。

在SEO和社交媒体方面，链接面临着一些挑战。我们还想要升级应用程序，因此有了最后入围的Nuxt。特别是静态页面生成功能。

其方法是在S3或GitHub页面中对SEO友好地托管页面。

有什么方法可以将Vuejs嵌入到Nuxt静态生成的页面上来进行REST调用，比如产品搜索及其结果？重点是为不可能生成的静态页面获取动态。例如，对于产品搜索等，我指的是静态预生成页面的混合，可以在这些页面上执行动态Vuejs内容。

顺便说一句:我们是，而不是，谈论的是生成动态路由。

Answer 1

你当然可以。特别是在最新版本的Nuxt (v2.12)中，它们修改了fetch()钩子，以便在页面加载时或由事件触发时从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: []
      }
    }
  }

在本例中，我从Prismic中检索数据。

然后，在模板中，您可以使用像<button @click="$fetch">这样的甜美方法来触发调用，或者使用$fetchState.pending来检查您正在进行的调用是否已经完成。

这里有更多信息：https://nuxtjs.org/api/pages-fetch/