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

Posted 2023-02-22

【中文标题】NUXT - s-s-r - 组件未在服务器端呈现

【英文标题】：NUXT - s-s-r - components are not being rendered server side

【发布时间】：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 添加了代码示例

你有什么解决办法吗？我也面临同样的问题

【参考方案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>

【参考方案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 提供服务器端渲染。无需额外部署节点服务器。