如何解决Nuxt3项目部署后无法启用SSR模式的问题？

一、修正Nuxt3核心配置 #

• Nuxt3已废弃target: 'server'配置，需在nuxt.config.ts中指定Nitro服务器预设，确保适配Node.js运行环境：

export default defineNuxtConfig({
  ssr: true, // 显式开启SSR（默认已开启，若被误设为false需修正）
  nitro: {
    preset: 'node-server'
  }
})

二、检查托管服务部署配置 #

• 构建命令：必须使用npm run build，该命令会生成.output目录，包含完整的SSR服务器代码
• 启动命令：设置为node .output/server/index.mjs，这是Nuxt3 SSR项目的标准启动方式
• Node.js版本：确保托管服务使用的Node.js版本≥v18，过低版本会导致Nitro运行异常

三、排查useFetch脚本问题 #

你的useFetch代码本身支持SSR，但异常情况可能导致功能失效，建议添加错误排查逻辑：

<script setup>
const { data: posters, error } = await useFetch('https://something.com/posters/')
// 输出错误信息到服务器日志（SSR时日志会出现在托管服务的服务器日志中）
if (error.value) {
  console.error('海报数据请求失败:', error.value)
}
</script>

• 确认目标API没有IP白名单或防盗链限制：SSR模式下请求由服务器发起，若API限制了来源IP，需将托管服务的服务器IP加入白名单
• 检查API是否返回正确的JSON格式，格式错误会导致data无法正常解析

四、验证SSR是否生效 #

• 查看页面源代码（右键→查看页面源代码）：若能看到posters的具体内容被嵌入HTML，说明SSR已正常运行；若仅存在空的占位元素，则为客户端渲染模式
• 查看托管服务的服务器日志：启动服务后若能看到Nuxt3的启动日志（如Nitro server listening on），说明Node服务已正常运行

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