如何在Nuxt中定义静态页面需在客户端进行hydrate的信息

核心逻辑：AsyncData 的执行时机规则 #

asyncData 本身不会自动识别请求类型，执行时机是通过预渲染路由配置+环境判断人工控制的：

• 执行nuxt generate构建静态站点时，所有被配置为预渲染的路由对应的页面 asyncData 会在构建阶段执行，返回的数据会直接注入静态 HTML，用户访问时无需再发起对应请求
• 未配置预渲染的路由、或者明确限定仅客户端执行的请求，会在用户打开页面后由浏览器发起

具体场景实现方案 #

1. 静态内容（构建时拉取）处理 #

公开的博客文章列表、文章详情这类所有用户访问都一致、变动频率低的内容，直接在对应页面的 asyncData 中编写拉取逻辑，同时在 nuxt 配置中把对应路由加入预渲染列表即可：

// pages/posts/[id].vue 文章详情页
export default {
  async asyncData({ params, $http }) {
    // 构建阶段执行，文章内容直接写入静态页
    const post = await $http.$get(`/api/public/posts/${params.id}`)
    return { post }
  }
}

// nuxt.config.js 配置预渲染路由
export default {
  generate: {
    routes: async () => {
      // 构建时拉取全量公开文章ID，生成对应静态页
      const posts = await fetch('https://你的后端接口地址/public/posts').then(res => res.json())
      return posts.map(post => `/posts/${post.id}`)
    }
  }
}

2. 动态内容（客户端拉取）处理 #

用户点赞状态、头像、私有统计数据这类和用户身份绑定、实时变动的内容，两种实现方式均可：

• 方式1：在mounted（Vue2）/onMounted（Vue3）生命周期中发起请求，生命周期仅在客户端执行，不会参与构建流程
• 方式2：在 asyncData 中增加客户端环境判断，仅在浏览器环境下执行对应请求

// pages/posts/[id].vue
export default {
  async asyncData({ params, $http, process }) {
    const post = await $http.$get(`/api/public/posts/${params.id}`)
    let likeStatus = false
    // 仅客户端执行点赞状态查询请求
    if (process.client) {
      likeStatus = await $http.$get(`/api/user/like-status/${params.id}`, {
        headers: { Authorization: `Bearer ${localStorage.getItem('用户token')}` }
      })
    }
    return { post, likeStatus }
  },
  // 私有数据直接在mounted中拉取
  async mounted() {
    this.userInfo = await this.$http.$get('/api/user/info')
    this.privateStats = await this.$http.$get('/api/user/stats')
  }
}

私有个人页面不需要加入预渲染路由列表，用户访问时会先加载通用静态壳，再由客户端拉取私有数据渲染即可。

优化注意事项 #

• 动态内容对应的UI块可以用<ClientOnly>组件包裹，避免构建阶段出现服务端渲染与客户端内容不一致的hydration报错
• 点赞这类交互操作直接编写客户端请求逻辑即可，不需要经过asyncData，操作完成后手动更新本地状态即可

内容的提问来源于stack exchange，提问作者Kos-Mos