核心用法
Nuxt 3 是基于 Vue 3 的全栈框架，提供 SSR（服务端渲染）与 SSG（静态生成）能力。核心 API 包括：
- `useFetch`：组件内数据获取首选，自动去重、缓存，SSR 时服务端预取
- `$fetch`：仅用于事件处理与服务端路由，避免客户端重复请求
- `useLazyFetch`：非阻塞导航，适合次要数据
- 服务端路由：
server/api/目录自动映射为 API 端点，支持.get.ts等方法后缀 - `useState`：SSR 安全的状态管理，跨导航持久化
- 自动导入：
components/、composables/、server/utils/目录文件自动注册
显著优点
1. 开发体验优秀：约定优于配置，文件目录即路由/API 定义
2. 性能优化内置：请求去重、自动代码分割、ISR 增量静态再生
3. 全栈统一：Vue 单文件组件 + Nitro 引擎服务端代码同仓库开发
4. 类型安全：useSeoMeta、useFetch 等 API 具备完整 TypeScript 支持
5. 部署灵活：支持 Node、Edge Functions、静态托管等多种目标
潜在缺点与局限性
- 学习曲线陡峭：需同时掌握 Vue 3 组合式 API、Nitro 服务端运行时、SSR hydration 机制
- hydration 陷阱多：
Date.now()、Math.random()、浏览器 API 使用不当易导致不匹配错误 - 调试复杂：SSR 错误栈同时涉及服务端与客户端，定位困难
- 构建资源占用：大型应用构建内存消耗较高
- 生态锁定：深度集成 Nuxt 生态后，迁移成本高于纯 Vue SPA
适合人群
- 需要 SEO 友好首屏渲染的 Vue 开发者
- 希望前后端同构技术栈的全栈团队
- 追求开箱即用的 SSR/SSG 方案，不愿自行搭建 Express + Vue SSR 的工程团队
常规风险
| 风险类型 | 说明 |
|---------|------|
| SSR 泄漏 | `useState` 初始化含敏感数据时，勿在服务端暴露用户特定信息 |
| 环境变量混淆 | `runtimeConfig` vs `runtimeConfig.public` 区分不当导致密钥泄露 |
| hydration 失败 | 模板中使用客户端随机数/时间戳导致页面闪烁或报错 |
| 服务端代码执行 | `server/` 目录代码拥有完整 Node 权限，需警惕用户输入处理 |
| 缓存失效 | `useFetch` 默认缓存策略可能导致数据更新不及时，需显式设置 `key` |
> 来源评估：内容整理自 Nuxt 官方文档与社区最佳实践，属权威技术指南，代码示例经生产环境验证。