使用useAsyncData与Nuxt Content处理CSV数据遇部署后二次访问无数据问题

问题场景 #

• 在Nuxt项目中使用Nuxt Content读取CSV文件，通过以下代码可正常获取数据：

const { data }  = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne())

• 需要将数据传入sortConcerts和formatConcerts函数处理后展示，最初尝试useAsyncData的transform选项未成功，改用computed属性处理：

const sorted = computed(() => data.value?.body ? sortConcerts(data.value.body) : null)
const concerts = computed(() => sorted.value ? formatConcerts(sorted.value, en) : null)

• 开发环境下包裹<ClientOnly>组件可正常运行，但通过nuxt generate部署到Netlify后，首次访问路由能看到数据，第二次访问时列表为空。

原因分析 #

1. <ClientOnly>导致静态生成时组件内容未被预渲染，客户端首次访问会重新获取数据，但二次访问时可能因缓存或状态复用问题，computed未正确触发更新。
2. computed依赖的变量（如en）可能仅在客户端有值，服务端渲染时无法获取，导致静态生成内容为空，客户端hydration时状态不匹配。
3. 未正确利用useAsyncData的数据转换逻辑，处理后的数据未被纳入Nuxt的缓存和静态生成流程。

正确实现方案 #

方案1：在useAsyncData中直接处理数据（推荐） #

将排序和格式化逻辑整合到useAsyncData的回调中，让处理后的数据直接被缓存和预渲染，避免computed带来的客户端hydration问题：

const { data: concerts } = await useAsyncData<Concert[]>('concerts', async () => {
  // 获取原始CSV数据
  const rawData = await queryContent('/concerts').findOne()
  // 若存在数据则依次处理，否则返回空数组
  if (!rawData?.body) return []
  const sortedData = sortConcerts(rawData.body)
  return formatConcerts(sortedData, en)
})

注意：如果en是本地化语言变量，需确保它在服务端渲染时也能正确获取（比如通过Nuxt I18n的useLocale方法，而非仅客户端的全局变量）。

方案2：修复computed的服务端兼容性 #

如果必须保留computed处理逻辑，需确保所有依赖变量在服务端和客户端一致，并移除<ClientOnly>：

// 用useState或官方i18n方法确保locale在服务端也能获取
const locale = useState('locale', () => 'en')

const { data } = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne())

const sorted = computed(() => {
  return data.value?.body ? sortConcerts(data.value.body) : []
})

const concerts = computed(() => {
  return sorted.value.length ? formatConcerts(sorted.value, locale.value) : []
})

• 移除<ClientOnly>组件，让内容支持服务端预渲染
• 将依赖的en替换为服务端可访问的状态变量，避免客户端特有变量导致的渲染不匹配

方案3：检查静态生成配置 #

确保nuxt.config.ts中generate配置正确包含目标路由，避免静态生成时遗漏该页面的数据预渲染：

export default defineNuxtConfig({
  generate: {
    routes: ['/your-concert-route'] // 手动指定需要预生成的路由（如果自动生成未覆盖）
  }
})

验证步骤 #

1. 执行nuxt generate生成静态文件
2. 本地用npx serve .output/public预览，测试多次访问目标路由，确认数据始终正常显示
3. 重新部署到Netlify，验证线上环境的访问情况

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