首页 文章

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

提问于
浏览
2

我是Nuxt的新手 - 将我的vue应用程序转换为它,并将其用于 生产环境 :gameslate.io

该应用程序使用 asyncData 方法获取游戏列表 - 但是整个布局没有呈现给服务器...

如果您查看页面源,您将看到Nuxt将所有数据放在 window.__NUXT__ 中,但是没有网格html .

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

否则,谷歌无法抓取游戏列表 - 这对SEO来说变得毫无用处...(checkout 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>

1 回答

  • 0

    您必须删除data()(返回一个空数组),因为它覆盖了asyncData .

    谷歌可以完美抓取,因为如果你使用asyncData生成DOM树,你可以检查 view-source:http://localhost:3000

相关问题