时间戳

首页 > 解决方案 > 来自 Nuxt 的静态生成的 html 页面上的动态内容的可能性以及来自 REST API 的响应

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

问题描述

我们经常使用 Vuejs 作为单页应用程序 (SPA)。Vue 满足了很多要求，很受欢迎。

在搜索引擎优化和社交媒体链接方面面临一些挑战。我们还希望升级应用程序，因此将 Nuxt 列入候选名单。具体来说，静态页面生成功能。

该方法是将页面托管在对 S3 或 GitHub Pages SEO 友好的环境中。

有什么方法可以在 Nuxt 静态生成的页面上嵌入 Vuejs 以进行 REST API 调用，例如产品搜索及其结果？关键是为不可能的静态生成页面获得动态。例如，对于产品搜索等。我说的是静态预生成页面的混合，可以在其上执行动态 Vuejs 内容。

顺便说一句：我们不是在谈论生成动态路由。

标签： htmlvue.jsstaticnuxt.jsgenerate

解决方案

当然可以。特别是在 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 API 检索数据。

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

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

推荐阅读