Question

我是Nuxt的新手 - 将我的vue应用程序转换为它，并让它开始制作：gameslate.io

该应用正在使用asyncData方法获取游戏列表 - 但完整的布局并未呈现给服务器......

如果你查看页面来源，你会发现Nuxt正在将所有数据放在window.__NUXT__中，但是没有网格html。

使用asyncData获取数据后，如何在服务器上呈现完整布局？

否则，谷歌无法抓取游戏列表 - 这对搜索引擎优化来说变得毫无用处......（结帐推特的页面来源 - 它会加载整个页面，包括动态内容）

这是＆＃34;家庭＆＃34;进行异步数据调用的页面组件（简化）：

<template>
  <div>things</div>                       <!-- rendered on server -->
  <game-grid :games="games"></game-grid>  <!-- rendered in browser -->
</template>

<script>
  export default {
    data() {
      return {
        games: []
      }
    }
    async asyncData() {
      let games = await getGames(filters);
      return { games };
    }
  }
</script>

Answer 1

使用 Nuxt >= 2.12，您可以使用 fetch() 钩子在页面呈现之前获取和处理数据。它在后端和前端都被利用：“...在渲染路由时在服务器端调用 fetch，在导航时在客户端调用。”

<template>
  <div>things</div>                       <!-- rendered on server -->
  <game-grid :games="games"></game-grid>  <!-- rendered in browser -->
</template>

<script>
  export default {

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

    async fetch() {

      // Get & process data, in whatever way you prefer
      await myGetFunc(filters).then(response => {

          // Do something with the payload, like set component data...
          this.games = response;
          /// ... or send it to a VueX store:
          this.$store.dispatch('globalResults', response)
        
        }).catch(error => {
          console.log('ERROR: ', error)
        }})

    }


    methods: {

        // ...
    
    },


  }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

你必须删除data（）（返回一个空数组）因为它覆盖了asyncData。

google可以完美抓取，因为如果使用asyncData会生成DOM树，您可以查看view-source:http://localhost:3000

Answer 3

如果要进行服务器端渲染，则应该有一个节点服务器来部署该应用程序。

来源：https://www.youtube.com/watch?v=nngsKhTb2BA

NUXT - SSR - 组件未在服务器端呈现

3 个答案: