Nuxt-Content动态路径部署问题：Netlify生成后点击无法加载文档

我尝试使用动态路径展示Nuxt-Content文件夹中的文档，代码如下：

<script setup lang="ts">
const n = ref(1)
</script>

<template>
  <div>
    <ContentDoc 
      v-slot="{ doc }"
      :path="'collection/' + n" 
    >
      <ContentRenderer :value="doc" />
    </ContentDoc>
    <div @click="n++">
      Click-me !
    </div>
  </div>
</template>

该代码在开发环境运行正常，但通过nuxt generate部署到Netlify后，点击按钮切换路径时始终找不到文档。请问出现此问题的原因是什么，该如何解决？

原因分析 #

nuxt generate是静态站点生成模式，会在构建阶段预渲染所有能被静态分析到的页面和内容。你的代码中ContentDoc的路径是动态绑定的'collection/' + n，这个路径在构建阶段无法被静态识别，因此对应的文档不会被预生成到静态资源包中。部署后客户端切换路径时，找不到预先构建好的文档文件，就会出现找不到资源的错误。

解决方法 #

方案1：预生成所有需要访问的文档 #

在nuxt.config.ts中配置content模块的preload选项，列出所有可能被动态访问的文档路径，确保构建阶段将这些内容全部打包：

export default defineNuxtConfig({
  content: {
    preload: [
      'collection/1',
      'collection/2',
      // 补充所有可能被访问到的文档路径
    ]
  }
})

此方法适合文档数量固定且较少的场景，能保证所有动态访问的内容都有静态资源可调用。

方案2：客户端动态获取内容 #

放弃ContentDoc的静态预渲染逻辑，改用useContentQuery在客户端动态请求文档内容，无需预生成所有路径：

<script setup lang="ts">
const n = ref(1)
const { data: doc } = ref(null)

// 初始加载
const fetchDoc = async (num: number) => {
  const result = await useContentQuery('collection', {
    where: {
      _path: `/collection/${num}`
    }
  })
  doc.value = result.data.value?.[0]
}

await fetchDoc(n.value)

// 监听n的变化，重新获取文档
watch(n, async (newVal) => {
  await fetchDoc(newVal)
})
</script>

<template>
  <div>
    <ContentRenderer v-if="doc" :value="doc" />
    <div @click="n++">
      Click-me !
    </div>
  </div>
</template>

此方法适合文档数量较多或路径不固定的场景，内容会在客户端触发切换时动态请求加载。

方案3：使用增量静态再生（ISR） #

如果你的Nuxt版本支持，可配置增量静态再生（Netlify支持该特性），让服务器在运行时生成未预渲染的内容并缓存。在nuxt.config.ts中配置：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: false,
      routes: ['/'], // 指定基础预渲染路由
      incremental: true
    }
  }
})

同时在页面组件中设置重新验证时间：

<script setup lang="ts">
definePageMeta({
  revalidate: 60 // 每60秒重新验证并更新内容缓存
})

const n = ref(1)
</script>

此方法兼顾静态站点的性能优势和动态内容的灵活性，未预生成的内容会在首次访问时自动生成并缓存。

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