我是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 回答
您必须删除data()(返回一个空数组),因为它覆盖了asyncData .
谷歌可以完美抓取,因为如果你使用asyncData生成DOM树,你可以检查
view-source:http://localhost:3000