1、Nuxt3初探：什么是SSR？Nuxt3的核心优势、与Nuxt2的区别、项目初始化

1.1 什么是SSR？

SSR，全称是Server-Side Rendering，服务端渲染。

说白了，就是页面在服务器上组装好，再发给浏览器。

传统的SPA（单页应用）是浏览器拿到一个空壳HTML，然后通过JavaScript去渲染内容。而SSR是服务器直接把完整的HTML扔给浏览器。

我刚开始接触前端时，也觉得SPA挺酷的。但后来做电商项目，发现首屏加载慢得离谱，SEO也完全抓不到内容。嗯，那时候我才意识到SSR的价值。

核心区别一句话：

  • SPA：浏览器渲染，白屏时间长，SEO不友好
  • SSR：服务器渲染，首屏快，SEO友好

1.2 Nuxt3的核心优势

Nuxt3是Vue生态里最成熟的SSR框架。我个人习惯用它来搭建中大型项目，原因很简单——省心。

  • 自动路由：pages目录下的文件自动生成路由，不用手动配置。我在项目中经常遇到路由嵌套的场景，Nuxt3的自动路由配合文件命名规则，简直不要太爽。
  • 服务端渲染开箱即用：你只需要写Vue组件，Nuxt3自动处理SSR的复杂逻辑。我曾经在Nuxt2里折腾过SSR配置，改得头皮发麻。Nuxt3直接帮你搞定。
  • 静态站点生成（SSG）：如果项目不需要实时数据，可以生成纯静态HTML，部署到CDN上，速度快到飞起。
  • 自动导入组件：components目录下的组件自动注册，不用手动import。嗯，这个功能我特别喜欢，少写了很多重复代码。
  • TypeScript支持：Nuxt3原生支持TypeScript，类型安全，开发体验好。
  • Vite构建工具：开发时热更新极快，打包也快。相比Nuxt2的Webpack，简直是降维打击。

我的建议：如果你要做一个内容型网站（博客、文档、电商），直接上Nuxt3。如果是后台管理系统，SPA可能更合适。

1.3 Nuxt3与Nuxt2的区别

很多同学问我，直接从Nuxt2跳到Nuxt3，变化大不大？

说实话，变化挺大的。我列个表格，你一看就明白。

对比项 Nuxt2 Nuxt3
构建工具 Webpack Vite
渲染引擎 Vue2 Vue3
数据获取 asyncData / fetch useAsyncData / useFetch
状态管理 Vuex Pinia（推荐）
TypeScript 支持有限 原生支持
自动导入 部分支持 全面支持
渲染模式 SSR / SSG SSR / SSG / SWR / ISR

为什么会这样？因为Nuxt3完全重写了底层架构。它不再是一个简单的Vue封装，而是基于Vue3的Composition API重新设计的。

我记得有一次把Nuxt2项目迁移到Nuxt3，最大的坑是数据获取方式变了。Nuxt2的asyncData在Nuxt3里变成了useAsyncData，写法完全不同。不过适应之后，发现新API更灵活，也更符合Vue3的哲学。

避坑指南：我曾经在迁移时直接复制Nuxt2的asyncData代码到Nuxt3里，结果页面死活不渲染。后来才发现，Nuxt3的useAsyncData必须在setup函数里调用，而且返回的是响应式数据。

1.4 项目初始化

好了，理论说完了，咱们直接上手。

初始化一个Nuxt3项目，其实就一行命令。

npx nuxi init my-nuxt3-app

如果你用的是pnpm，也可以这样：

pnpm dlx nuxi init my-nuxt3-app

然后进入项目目录，安装依赖：

cd my-nuxt3-app
npm install
# 或者
pnpm install

启动开发服务器：

npm run dev
# 或者
pnpm dev

默认情况下，Nuxt3会启动在 http://localhost:3000。

你打开浏览器，会看到一个默认的Nuxt3欢迎页面。嗯，到这里，你的第一个Nuxt3项目就跑起来了。

小技巧：我个人习惯在初始化时加上 --package-manager 参数，比如 npx nuxi init my-app --package-manager pnpm，这样生成的模板直接就是pnpm的配置，省得后面再改。

1.5 项目结构一览

初始化完成后，你会看到这样的目录结构：

my-nuxt3-app/
├── .nuxt/          # 自动生成的构建文件
├── assets/         # 静态资源（CSS、图片等）
├── components/     # 组件
├── layouts/        # 布局文件
├── middleware/     # 中间件
├── pages/          # 页面文件（自动路由）
├── public/         # 公共静态文件
├── server/         # 服务端API
├── app.vue         # 根组件
├── nuxt.config.ts  # Nuxt配置文件
└── package.json

你想想看，这个结构是不是很清晰？pages目录放页面，components目录放组件，layouts目录放布局。Nuxt3会自动识别这些目录，帮你处理好路由、组件注册等事情。

我刚开始用Nuxt3时，最惊讶的就是pages目录下的文件自动生成路由。你新建一个 pages/about.vue，访问 /about 就能看到页面。不需要写任何路由配置。

总结一下：

  • SSR解决了SPA的首屏慢和SEO问题
  • Nuxt3相比Nuxt2，构建工具、渲染引擎、数据获取方式都有重大升级
  • 项目初始化只需一行命令，目录结构清晰，上手成本低

下一章，我们会深入pages目录，看看Nuxt3的路由系统到底有多强大。到时候我会分享一些我在项目中遇到的路由坑，保证让你少走弯路。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →