Vue/Nuxt SSR疑问：客户端mount取数与Nuxt asyncData的差异是什么？

第一个疑问解答 #

你所说的asyncData执行时机早于mount是完全正确的。
Nuxt的asyncData是组件实例初始化之前就会执行的钩子，不管是服务端渲染阶段还是客户端路由跳转阶段，它的运行时机都远早于客户端的mount钩子。需要注意你示例中的写法存在错误：asyncData运行时组件实例还未创建，因此不能访问this，正确用法是将取到的数据作为对象返回，返回值会自动合并到组件的data中。

第二个疑问解答 #

两种取数方案的差异不止你提到的渲染时机这一点，请求耗时带来的副作用也有明显区别：

• 客户端mount取数：
  • 无论请求耗时多久，浏览器都会先渲染组件的初始状态（也就是你示例中的空列表），用户会先看到空白内容或者骨架屏，请求完成后才会更新出数据，存在内容闪烁的问题
  • 搜索引擎爬虫爬取页面时，只能拿到初始的空DOM结构，无法抓取到列表数据，不利于SEO
• Nuxt SSR模式下asyncData取数：
  • 首次访问页面走服务端渲染流程时，请求会在服务端发起，服务端会等asyncData的所有异步逻辑执行完成后，再拼接填充好数据的完整HTML返回给浏览器，用户打开页面时直接就能看到完整内容，没有内容闪烁，也更利于SEO
  • 如果请求耗时过长，用户会停留在前一个页面或者看到浏览器的加载状态，直到服务端返回完整内容才会渲染页面，不会先显示空内容
  • 如果是用户已经进入站点后，在客户端侧跳转路由到该页面，asyncData会在客户端执行，此时会等待异步逻辑完成后再完成路由跳转，你也可以配合Nuxt的加载进度条组件给用户操作反馈

asyncData正确写法示例 #

<template>
  <div v-for="item in items" :key="item.id">
    <div> {{ item.name }} </div>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const response = await fetch('http://www.myendpoint.com')
    const items = await response.json()
    // 返回的对象会自动合并到组件data
    return { items }
  }
}
</script>

内容的提问来源于stack exchange，提问作者marisLincoln