Nuxt中SSR应用的数据获取时机、方式及重复取数疑问

一、数据获取钩子选择 #

针对你描述的场景，分两种情况选择对应钩子：

• 服务端渲染的初始页面（如Orders页）：使用Nuxt专属的asyncData或fetch钩子。这两个钩子会在服务端渲染阶段执行，获取数据后直接注入页面，保证首屏有完整渲染内容。
  • asyncData：返回的对象会直接合并到组件的data中，适合简单数据注入场景；缺点是无法访问组件实例this（组件未初始化），需通过上下文参数获取store、路由等资源。
  • fetch：灵活性更高，可将数据存入Vuex或组件data；Nuxt 2中组件级fetch能访问this，适合复杂数据处理或全局状态管理场景。
• 客户端跳转的页面（如Clients页）：同样可以用asyncData或fetch，它们会在客户端路由跳转时自动执行。如果是纯客户端渲染需求，也可使用Vue原生的mounted钩子，但优先推荐Nuxt专属钩子，保持SSR与客户端场景的代码一致性。

二、避免客户端重复获取服务端已加载的数据 #

核心思路是数据共享+前置判断，常用两种方案：

方案1：借助Vuex全局存储 #

服务端获取数据后存入Vuex，客户端在获取数据前先检查Vuex中是否已有数据，存在则直接复用，无需重复请求。示例代码：

// Orders页的asyncData
async asyncData({ store }) {
  // 检查Vuex中是否已有订单数据
  if (!store.state.orders.list.length) {
    // 服务端/客户端首次请求时获取数据
    const orders = await fetch('/api/orders')
    store.commit('orders/setOrders', orders)
    return { orders }
  }
  // 已有数据则直接从Vuex取
  return { orders: store.state.orders.list }
}

方案2：利用Nuxt内置状态序列化 #

Nuxt在服务端渲染完成后，会将页面数据序列化到全局对象window.__NUXT__中，客户端初始化时会自动读取该对象恢复状态：

• 若使用asyncData返回数据，Nuxt会自动处理这个过程，客户端跳转回已服务端渲染过的页面时，不会重复执行asyncData的请求逻辑。
• 若自定义数据存储逻辑，可手动将数据挂载到window.__NUXT__上，客户端通过判断该对象中是否存在目标数据来跳过请求。

补充：组件级缓存（单页面场景） #

如果仅需在单个组件内避免重复请求，可在组件data中设置加载标记，服务端获取数据后将标记设为true，客户端执行数据获取逻辑前先检查标记：

data() {
  return {
    orders: [],
    isDataLoaded: false
  }
},
async asyncData({ app }) {
  const orders = await app.$axios.$get('/api/orders')
  return { orders, isDataLoaded: true }
},
mounted() {
  if (!this.isDataLoaded) {
    // 仅客户端未加载时执行请求
    this.fetchOrders()
  }
}

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