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

JavaScript Vue.js

Davaid达蒙

2020-03-24

我是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>

第3671篇《NUXT-SSR-组件未在服务器端呈现》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
古一飞云 2020.03.24

您必须删除数据()(返回一个空数组),因为它会覆盖asyncData。

Google可以完美爬网,因为如果您使用asyncData会生成DOM树,则可以检查 view-source:http://localhost:3000

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android