如何确认Nuxt 3 SSR渲染完成并获取渲染后的HTML？

要拿到SSR渲染完成、客户端渲染开始前的完整HTML，你可以用Nuxt后端框架Nitro提供的钩子，比你当前用的app:rendered更直接：

方法：使用nitro:render钩子 #

在项目根目录的nuxt.config.ts里添加这段配置，就能在SSR渲染完成后拿到最终的完整HTML：

export default defineNuxtConfig({
  hooks: {
    'nitro:render': (renderContext) => {
      // renderContext.html 就是你要的SSR生成的完整HTML
      console.log('SSR渲染完成后的HTML:', renderContext.html);
      // 你可以在这里做保存、修改HTML等操作
    }
  }
})

关于你用的app:rendered钩子 #

这个钩子确实能触发，但它在服务端运行时只能拿到Vue组件渲染的内容，不包含Nuxt的布局、页面头部等外层结构，所以拿不到完整的最终HTML。而nitro:render是在整个SSR流程最后触发，能拿到发送给客户端的完整HTML。

你查阅的文档内容说明（中文翻译） #

• useNuxtApp：Nuxt提供的组合式函数，用于访问Nuxt应用实例，比如注册钩子、获取运行时上下文等。
• Nuxt高级钩子：覆盖了应用从初始化到服务端处理的全生命周期，其中nitro:*系列钩子是和服务端渲染输出相关的，可以直接操作SSR生成的内容。

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