This my 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: {
       ...
    }
  }
})

And this is how I get the data

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

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

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

On my Windows and Mac computers, after I use npm build and then npm start to start the project, the browser opens to 127.0.0.1:3000, right click to view the web page source code, I was able to see that the content of the web request is embedded in the html

When I deploy to the server, although I can still request data, everything looks normal, but the content of the web request is not embedded in html, I don’t understand how to solve this problem!

I tried to start the project with PM2 on the server
Tried running npm start directly from the project directory
but the result is the same

I realized that my local node version is 20.xx and the server is 16.xx (because the system version is too low to go up)

The above is what I can provide so far`