如何配置Nuxt仅在静态生成时请求后端 避免客户端重复拉取数据

1. 限制fetch仅在静态生成阶段执行 #

你当前的fetch钩子默认会在静态生成、客户端路由跳转两个阶段都执行，只需要加环境判断，客户端侧直接跳过fetch请求即可，修改pages/body-type/_slug.vue代码：

fetch () {
  // 客户端环境直接返回，不发起后端请求
  if (process.client) return
  return this.$axios.$post('/graphql', {
    query: `
      ...
    `,
    variables: { slug: this.$route.params.slug }
  })
    .then(({ data }) => {
      this.bodyTypes = data.bodyTypes.entities
    })
},
fetchKey (getCounter) {
  return getCounter() + this.$route.params.slug
},

2. 补充payload提取配置（可选） #

如果修改后仍未生效，可以在nuxt.config.js的generate配置下显式开启payload提取，确保所有静态页的数据都被打包到对应payload.js中：

export default {
  target: 'static',
  ...
  generate: {
    fallback: '404.html',
    // 新增此行，强制提取所有静态页面的payload数据
    payloadExtraction: true,
    exclude: [
      '/contact',
      '/login',
      '/privacy-policy',
      '/r/search-car-for-review',
      '/r/write-a-review',
      '/sign-up',
      '/terms-and-conditions',
    ]
  }
}

实现逻辑 #

Nuxt静态生成阶段执行fetch/asyncData拿到的数据，会自动序列化到对应页面的payload.js文件中。客户端路由跳转时，只要不重新触发fetch/asyncData请求，框架会自动读取预加载好的payload.js里的内容赋值到组件实例上，完全不会发起后端请求，符合节省后端资源的需求。

内容的提问来源于stack exchange，提问作者Bobík