Nuxt3项目部署服务器后SSR渲染失效问题求助

配置文件（config.js） #

export default defineNuxtConfig({
  devtools: { enabled: true },
  debug: true,
  server: {
    host: '0.0.0.0', 
    port: 3000       
  },
  ssr: true,
  target: 'server',
  modules: ['nuxt-mongoose', '@nuxt/ui', '@vant/nuxt', '@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
  mongoose: { 
    uri: process.env.MONGODB_URI,
  },
  css: [
    '~/assets/css/fonts.css'
  ],
  nitro: {
    port: 3000,
    logLevel: 'debug'
  },
  app: {
    head: {
       ...
    }
  }
})

数据获取逻辑 #

const recommends = useState('recommends', () => [])

const { data: recommendData } = await useAsyncData('recommends', () => $fetch(`/api/bookrecommendbeans/`))

if (recommendData.value && recommendData.value.length > 0) {
  recommends.value = recommendData.value
}

问题现象 #

• 本地Windows/Mac环境（Node20.x）：执行npm build后启动npm start，访问127.0.0.1:3000，网页源码可见请求内容嵌入HTML，SSR正常。
• 服务器环境（Node16.x，无法升级）：部署后能正常请求数据，但网页内容未嵌入HTML，SSR失效，HTML中包含报错信息：

[["Reactive",1],{"data":2,"state":3,"once":9,"_errors":10,"serverRendered":6,"path":15,"pinia":16},{},{"$scolor-mode":4,"$srecommends":8},{"preference":5,"value":5,"unknown":6,"forced":7},"system",true,false,[],["Set"],{"recommends":11},["NuxtError",12],{"message":13,"statusCode":14},"[GET] "/api/bookrecommendbeans/": <no response> Response is not defined",500, "/hotbooks",{"hot":17,"clickedPage":19},{"hot":18},null,{"page":18}]

• 尝试过PM2启动和直接npm start，结果一致。

解决方案 #

1. 降级Nuxt及依赖到Node16兼容版本 #

部分Nuxt 3新版本要求Node18+，若当前版本过高，降级到明确支持Node16的版本（如Nuxt 3.8.x及以下）。同步降级nuxt-mongoose、@nuxt/ui等关联模块到对应兼容版本，避免版本冲突。

2. 为Node16添加Response对象Polyfill #

Node16全局环境未内置完整Response对象（Node18+才稳定支持），可通过以下方式补全：

• 安装依赖：npm install node-fetch
• 在nuxt.config.js的nitro配置中添加钩子：

nitro: {
  port: 3000,
  logLevel: 'debug',
  hooks: {
    'server:setup'(server) {
      globalThis.Response = require('node-fetch').Response;
    }
  }
}

或在API路由顶部直接引入：

import { Response } from 'node-fetch';
globalThis.Response = Response;

3. 调整API路由响应方式 #

若API路由中直接使用new Response()，改用Nuxt自动处理的响应格式，避免依赖全局Response：

// 原写法
export default defineEventHandler(() => {
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
})

// 修改后兼容写法
export default defineEventHandler(() => {
  return data; // Nuxt自动处理响应格式
})

4. 替换$fetch为useFetch #

在SSR场景下，使用useFetch替代$fetch请求内部API，Nuxt会自动处理服务器端请求上下文，规避环境差异：

const recommends = useState('recommends', () => [])

const { data: recommendData } = await useFetch('/api/bookrecommendbeans/')

if (recommendData.value && recommendData.value.length > 0) {
  recommends.value = recommendData.value
}

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