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

Question

我是 Nuxt 的新手 - 将我的 vue 应用程序转换为它，并使其投入生产：gameslate.io

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

如果您查看页面源代码，您会看到 Nuxt 将所有数据放入 中window.__NUXT__，但没有网格 html。

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

否则，谷歌无法抓取游戏列表 - 这对 SEO 来说变得非常无用......（查看 twitter 的页面源 - 它加载整个页面，包括动态内容）

这是进行 asyncData 调用的“主页”页面组件（简化）：

<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

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

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