Nuxt生成动态路由后页面无内容显示的问题排查

问题根源 #

1. <client-only>阻塞预渲染
   你把所有文章内容都套在了<client-only>标签里，这会让Nuxt在预渲染（SSG）阶段直接跳过这部分内容的渲染。生成的index.html里只有加载提示，完全没有文章静态内容；客户端加载时即便执行useFetch，也可能因为预渲染数据缺失、加载时机问题导致内容无法正常显示。
2. 预渲染阶段未执行数据获取
   由于<client-only>的存在，页面组件在预渲染时不会被实例化，useFetch也就没法在服务端执行，导致生成的_payload.json里没有文章数据。客户端只能重新请求数据，但静态部署环境下可能出现路径或配置问题。
3. 配置冗余
   Nuxt 3里generate.routes已经被nitro.prerender.routes替代，两者重复配置可能引发预渲染逻辑冲突。

解决方案 #

1. 移除不必要的<client-only>（优先推荐） #

如果SharedSinglePage组件不依赖浏览器专属API（比如window、document），直接去掉<client-only>，让Nuxt在预渲染时完成数据获取和内容渲染：

<template>
  <div v-if="pending" class="flex items-center justify-center bg-orange-300" style="height:95vh">Téléchargement...</div>
  <div v-if="post"><SharedSinglePage table="publications" :item="post" /></div>
</template>

<script setup>
defineI18nRoute({ paths: { fr: '/publications/[single]' } })
const id = useRoute().params.single.split('-').pop()
const { data: post, pending } = await useFetch('/api/post', { 
  method: 'post', 
  body: { id },
  // 给请求加唯一key，确保预渲染数据缓存正确
  key: `publication-${id}`
})
</script>

2. 若必须保留<client-only>（组件依赖浏览器API） #

用useAsyncData替代useFetch，强制在预渲染阶段获取数据，并确保客户端能复用预渲染的payload：

<template>
  <client-only>
    <div v-if="pending" class="flex items-center justify-center bg-orange-300" style="height:95vh">Téléchargement...</div>
    <div v-if="post"><SharedSinglePage table="publications" :item="post" /></div>
  </client-only>
</template>

<script setup>
defineI18nRoute({ paths: { fr: '/publications/[single]' } })
const id = useRoute().params.single.split('-').pop()
const { data: post, pending } = await useAsyncData(`publication-${id}`, async () => {
  return await $fetch('/api/post', { 
    method: 'post', 
    body: { id }
  })
}, {
  // 强制服务端预渲染时执行数据获取
  server: true,
  // 可选：只保留需要的字段，减小payload体积
  pick: ['id', 'title', 'content']
})
</script>

3. 清理冗余配置 #

删掉generate.routes，只保留nitro.prerender.routes：

nitro: {
  prerender: {
    concurrency: 1,
    interval: 500,
    crawlLinks: true,
    failOnError: false,
    routes: routeList
  },
},
// 移除下面这段重复配置
// generate: {
//   routes: routeList
// }

4. 优化路由参数获取（可选） #

通过split('-').pop()拿id的方式不够可靠，建议调整路由规则，比如改成/publications/[id]/[slug]，直接通过useRoute().params.id获取id，避免字符串拆分出错。

验证步骤 #

1. 执行nuxt generate，查看dist/publications/[slug]/index.html，确认里面有文章的静态内容（不是只有加载提示）。
2. 打开对应的_payload.json，检查是否包含post字段和文章数据。
3. 部署静态文件后，打开浏览器控制台，排查是否有404、CORS之类的报错。

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