Nuxt 3 是一个基于 Vue 3 的全栈应用框架，它不仅帮你处理服务端渲染（SSR），还把路由、数据获取、状态管理、API 服务等能力整合成一个开箱即用的体系。用尤雨溪的话说，Nuxt 让 Vue 应用从“前端项目”进化成了“完整的 Web 应用”。它的核心目标是降低全栈开发的门槛——开发者不需要分别搭建前端构建和后端服务，一个 Nuxt 项目就能搞定从 API 接口到页面渲染的所有工作。
自动路由：页面即路由
Nuxt 3 约定 pages/ 目录下的文件结构直接映射为应用的路由，不需要手写一份路由配置表：
pages/
├── index.vue → /
├── about.vue → /about
├── posts/
│ └── [id].vue → /posts/:id
└── admin/
└── index.vue → /admin- 动态路由：用方括号
[param]定义动态片段，组件内通过$route.params获取。 - 嵌套路由：建立与路由同名的目录，目录内的
index.vue作为父路由，用<NuxtPage>渲染子页面。 - 自动懒加载：每个页面默认被拆分成独立的 JS 块，只在访问时加载，天然做到路由级代码分割。
这种“零配置路由”让大型项目的页面组织一目了然，找页面直接去 pages/ 目录看文件树就行。
数据获取：告别“客户端再补一刀”
SSR 最核心的收益之一就是首屏数据直接由服务端填充，用户看到的 HTML 已经包含了完整内容，而不是先看到一个空壳再等 JS 加载后去请求接口。Nuxt 3 提供了两个内置的请求函数来无缝完成这一任务。
useFetch：最简洁的 API，直接传入 URL 就能获取数据，在服务端和客户端都能运行，且会自动处理“服务端获取后传递到客户端”的序列化过程，避免重复请求。
<script setup>
const { data: posts } = await useFetch('/api/posts')
</script>useAsyncData：更灵活的获取方式，适合复杂逻辑或第三方数据源。
这两个函数会自动与 Nuxt 的Payload 机制配合：服务端渲染时获取的数据会被序列化并注入到 HTML 中，客户端挂钩子（hydration）时会直接读取这些数据，而不会再次请求接口。这既保证了首屏速度，又避免了不必要的网络调用。
组合式函数：自动导入，随处可用
Vue 3 的自定义 Hooks（组合式函数）在 Nuxt 3 中得到了更自然的使用方式。你可以在 composables/ 目录下编写可复用的逻辑块，然后在整个项目的任意组件中无需手动 import 即可直接使用：
// composables/useAuth.ts
export function useAuth() {
const user = useState('user', () => null)
// ...登录、登出逻辑
return { user }
}<script setup>
// 直接使用，不用 import
const { user } = useAuth()
</script>这种“约定优于配置”的设计，加上 Vue 3 的 Composition API，让代码组织更加自由且一致。
渲染模式切换：一套代码，多种渲染策略
Nuxt 3 最重要的能力之一是混合渲染——同一个应用的不同页面可以使用不同的渲染模式，而且切换几乎零成本。你通过每个页面的 nuxt.config 或页面级配置决定它是 SSR、SSG、CSR 还是 ISR。
| 渲染模式 | 何时使用 | 配置方式 |
|---------|----------|----------|
| SSR（服务端渲染） | 需要动态数据、SEO 友好的页面（如列表页） | 默认模式，页面请求时在服务端渲染 |
| SSG（静态站点生成） | 内容不常变的页面（如文档、博客） | 运行 nuxi generate 预渲染成静态 HTML |
| CSR（客户端渲染） | 后台管理、登录后强交互页面 | 设置 ssr: false，仅在客户端渲染 |
| ISR（增量静态再生） | 海量静态页面但部分需要按需更新 | 配合边缘函数或部署平台（如 Vercel）实现定时重生成 |
在页面组件中，你可以通过 routeRules 精细控制：
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/blog/**': { swr: 3600 }, // ISR：缓存1小时
'/admin/**': { ssr: false }, // 后台纯CSR
'/privacy': { static: true } // 静态化
}
})这种灵活度意味着你不需要为了某几个页面的特殊需求而重写整个应用架构。
服务端能力与 API 路由：一个项目搞定全栈
Nuxt 3 内置了基于 Nitro 引擎的服务端框架，你可以在 server/ 目录下编写 API 路由和中间件，直接操作数据库、处理文件上传、与第三方服务通信。这些 API 与你的 Vue 应用运行在同一个项目中，共享环境和端口，开发体验非常统一：
// server/api/posts.get.ts
export default defineEventHandler(async () => {
const posts = await db.post.findMany()
return posts
})调用时只需要 /api/posts，前端 useFetch 直接使用。这意味着你不再需要单独拆出一个 Express/Koa 项目，全栈功能在同一个代码库里即可完成，对个人开发者和中小团队来说大幅降低了运维成本。
一句话总结
Nuxt 3 让 Vue 应用走出了“纯前端”的边界，用统一的开发范式覆盖了从路由、数据预取到 API 服务的全栈需求。它既保留了 Vue 3 的现代特性，又在开发体验上迈了一大步——尤其是对需要 SEO、首屏性能或快速搭建全栈原型的项目来说，它几乎就是“开箱即用的最优解”。