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

【问题标题】：NUXT - SSR - components are not being rendered server sideNUXT - SSR - 组件未在服务器端呈现
【发布时间】：2018-05-20 14:53:01
【问题描述】：

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

【问题讨论】：

我可以从您的网站中看到
中可能有问题，您能否在此处分享该副本或相同副本的代码，以便我们更好地理解它。
意思是在'game-grid'组件的代码中
@HardikSatasiya 添加了代码示例
你有什么解决办法吗？我也面临同样的问题

标签： javascript vue.js server-side-rendering nuxt.js

【解决方案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>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

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

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

【讨论】：

从数据中删除了games: []，但返回的 HTML 仍然不包含网格
文档说：The result from asyncData will be merged with data.

【解决方案3】：

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

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

【讨论】：

Nuxt 提供服务器端渲染。无需额外部署节点服务器。