NUXT3动态URL的服务端渲染(SSR)配置求助

1. 修改 Nuxt 配置切换到 SSR 模式 #

打开nuxt.config.ts，调整配置启用 SSR 并设置服务器端输出模式：

export default defineNuxtConfig({
  ssr: true, // 确保启用 SSR（默认值为true，若之前改为false需改回）
  nitro: {
    output: 'server', // 指定输出为服务器模式，替代原 SSG 的 static 输出
  }
})

2. 动态路由页面的数据预取（核心步骤） #

在pages/resources/[post].vue中，利用 Nuxt3 提供的服务器端数据预取钩子，确保页面渲染前获取并绑定数据：

方案一：使用 useAsyncData #

<template>
  <div v-if="resource">
    <h1>{{ resource.title }}</h1>
    <div class="content">{{ resource.content }}</div>
  </div>
  <div v-else>资源加载中...</div>
</template>

<script setup>
const route = useRoute()
const postId = route.params.post as string

// 服务器端预取数据，每个路由参数对应唯一缓存键
const { data: resource } = await useAsyncData(`resource-${postId}`, async () => {
  // 替换为你的真实 API 地址
  const res = await fetch(`https://your-api-url/resources/${postId}`)
  if (!res.ok) throw new Error('资源获取失败')
  return res.json()
})
</script>

方案二：使用 useFetch（更简洁） #

<template>
  <div v-if="data">
    <h1>{{ data.title }}</h1>
    <div class="content">{{ data.content }}</div>
  </div>
  <div v-else>资源加载中...</div>
</template>

<script setup>
const route = useRoute()
const postId = route.params.post as string

const { data, error } = await useFetch(`https://your-api-url/resources/${postId}`, {
  key: `resource-${postId}`
})

// 处理请求错误，比如跳转404页面
if (error.value) {
  throw createError({ statusCode: 404, message: '该资源不存在' })
}
</script>

3. 验证 SSR 效果 #

• 启动开发服务器：npm run dev
• 访问动态路由页面（如http://localhost:3000/resources/123）
• 右键查看页面源码，确认能看到渲染后的资源标题、内容等真实数据，说明 SSR 生效，满足 SEO 需求

4. 生产构建与部署 #

• 执行生产构建：npm run build
• 构建完成后生成.output目录（替代原 SSG 的dist）
• 部署时运行服务器：node .output/server/index.mjs，可结合 PM2、Docker 等工具实现稳定托管

额外注意事项 #

• 若需保留部分页面的 SSG 能力，可在nuxt.config.ts中配置prerender.routes指定预渲染路由，其余路由自动使用 SSR
• 若 API 存在跨域问题，可在 Nuxt 中配置代理，或在server/api目录编写后端接口转发请求

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