Nuxt3 Generate预渲染：如何让npm run generate等待$fetch异步数据？

这完全可行，问题出在你直接使用await $fetch的方式——Nuxt的静态生成流程不会识别这种顶层异步操作，无法在构建阶段等待请求完成。你需要改用Nuxt专为服务端渲染/静态生成设计的异步数据获取钩子：useFetch 或 useAsyncData，它们会在npm run generate时触发请求并等待结果，确保内容被预渲染到HTML中。

修改后的代码示例（使用useFetch）：

<template>
    <article class="post" v-if="post">
        <section
            v-html="post.content"
        ></section>
    </article>
</template>
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/post/${route.params.handle}`, {
    catch: () => {}
});
</script>

或者使用useAsyncData的写法：

<template>
    <article class="post" v-if="post">
        <section
            v-html="post.content"
        ></section>
    </article>
</template>
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useAsyncData(`post-${route.params.handle}`, () => {
    return $fetch(`/api/post/${route.params.handle}`).catch(() => {});
});
</script>

核心原因是：Nuxt的静态生成流程会追踪useFetch和useAsyncData发起的异步请求，在构建阶段执行这些请求并等待数据返回，之后再完成组件渲染和HTML生成。而直接在<script setup>顶层使用await $fetch，Nuxt会将其视为客户端侧的异步操作，不会在构建时等待，导致预生成的HTML中没有post.content的内容，只能在页面加载后由客户端请求填充。

另外需要确保你的Nuxt配置（nuxt.config.ts）中，静态生成相关的配置是启用状态，默认情况下nitro.prerender.enabled为true，如果你的文章路由是动态生成的，可能需要在nitro.prerender.routes中指定所有需要预渲染的路由，或者启用自动发现功能。

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