Nuxt 4开启SSR后页面源码无HTML内容求助

问题描述 #

我刚创建了一个最新版本的Nuxt项目，已在nuxt.config.ts中设置ssr: true，但查看页面源码时仅能看到Nuxt UI的CSS和JS，无法看到HTML内容，需要解决该问题以正常显示HTML。

nuxt.config.ts配置 #

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  ssr: true,
  modules: [
    '@nuxt/ui',
    '@nuxtjs/sitemap',
    '@nuxtjs/i18n',
  ],
  css: ['~/assets/css/main.css'],
  i18n: {
    locales: [
      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
      { code: 'nl', language: 'nl-NL', name: 'Nederlands', file: 'nl.json' }
    ],
    defaultLocale: 'nl',
    strategy: 'prefix_except_default',
    lazy: true,
    langDir: 'locales',
    vueI18n: './i18n.config.ts',
    detectBrowserLanguage: {
      useCookie: false,
      redirectOn: 'no prefix',
      alwaysRedirect: false
    }
  }
})

/app/pages/index.vue代码 #

<script setup>
const items = ref([])
const results = ref(0)
const currentPage = ref(1)

const {data, pending, error} = await useFetch(`http://localhost:8777/products/1/24`, {
  method: 'GET',
})

if (error.value === undefined) {
  const answer = JSON.parse(data.value)
  items.value = answer.data
  results.value = answer.results
}
</script>

<template>
  <div class="max-w-7xl mx-auto flex flex-col px-4">
    <tinyheader />
    <topheader />
    <navigation />

    <div class="flex gap-12">
      <div class="shrink-0 w-max max-w-[260px]">
        FILTERS ... <br />
        Hier komen meerdere filters te staan ... <br />
      </div>
      <div>
        <div class="grid grid-cols-3 gap-4 mb-12">
          <products :data="items" />
        </div>
      </div>
    </div>
    <div class="flex place-content-end">
      <pagination :page="currentPage" :total="results" :per-page="24" />
    </div>
  </div>
</template>

项目依赖 #

"dependencies": {
    "@nuxt/ui": "3.3.2",
    "@nuxtjs/i18n": "10.0.6",
    "@nuxtjs/sitemap": "7.4.3",
    "nuxt": "^4.0.3",
    "typescript": "^5.9.2",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  }

排查与解决方法 #

• 异步数据处理错误
  useFetch已自动完成JSON解析，无需手动调用JSON.parse(data.value)，这会导致数据赋值失败，页面无内容渲染。修改数据处理逻辑：

  if (!error.value && data.value) {
    items.value = data.value.data
    results.value = data.value.results
  }
  

  同时添加加载和错误状态的兜底渲染，确保SSR过程中无论请求状态如何，都有基础HTML输出：

  <template>
    <div class="max-w-7xl mx-auto flex flex-col px-4">
      <tinyheader />
      <topheader />
      <navigation />
  
      <div v-if="pending" class="py-8 text-center">加载中...</div>
      <div v-else-if="error" class="py-8 text-center text-red-500">请求出错，请稍后重试</div>
      <div v-else>
        <!-- 原有的页面内容 -->
      </div>
    </div>
  </template>
  

• i18n语言检测干扰SSR
  当前detectBrowserLanguage的redirectOn: 'no prefix'可能在SSR时触发重定向，导致初始渲染的HTML不完整。暂时修改配置关闭自动重定向测试：

  detectBrowserLanguage: {
    useCookie: false,
    redirectOn: 'never',
    alwaysRedirect: false
  }
  

  确认问题解决后，再根据需求调整语言检测逻辑，确保服务器端能正确处理语言请求头。

• 本地API的SSR访问问题
  SSR过程中服务器端直接请求http://localhost:8777，如果API服务未启动或服务器无法访问该地址，会导致数据获取失败。通过Nuxt代理配置解决：
  在nuxt.config.ts中添加：

  export default defineNuxtConfig({
    // ...其他配置
    nitro: {
      devProxy: {
        '/api': {
          target: 'http://localhost:8777',
          changeOrigin: true,
          prependPath: true
        }
      }
    }
  })
  

  然后将请求改为useFetch('/api/products/1/24')，确保SSR和客户端请求都能正确访问API。

• 自定义组件的SSR兼容性
  检查tinyheader、products等自定义组件，确保没有直接在组件初始化时调用window、document等浏览器专属API。如果必须使用，用process.client判断或放在onMounted钩子中：

  <script setup>
  onMounted(() => {
    // 仅在浏览器端执行的代码
    if (process.client) {
      // 比如操作DOM或访问window对象
    }
  })
  </script>
  

内容的提问来源于stack exchange，提问作者Angelo van Cleef