服务端渲染SSR(Server-Side Rendering)是一种在服务器端生成网页内容的技术，这种实现方式与传统的客户端渲染CSR(Client-Side Rendering)有所不同。在SSR中，当服务端收到了客户端的请求之后，会先生成完整的HTML页面，然后将其发送给客户端，通过这种方式，我们不但可以隐藏客户端接口调用逻辑，还可以提高首屏加载速度和SEO（搜索引擎优化）效果。

下面我们就通过实际的操作来看看如何在Vue3中整合Nuxt来实现服务端渲染操作。

安装 Nuxt 3

首先，先要对Nuxt.js进行安装，在Vue3中我们可以通过如下的方式进行安装。

npx nuxi init my-nuxt3-app
cd my-nuxt3-app
npm install

通过npx nuxi init命令，我们可以初始化一个新的Vue3项目，然后再这个项目中就默认包含了Nuxt3的相关命令操作。生成完成之后项目结构如下所示。

my-nuxt3-app/
├── .nuxt/          # Nuxt 生成的临时文件
├── assets/         # 静态资源（Sass、Less、图片等）
├── components/     # Vue 组件
├── composables/    # Vue 组合函数 (Composition API)
├── layouts/        # 页面布局
├── middleware/     # 中间件
├── pages/          # 应用的页面视图
├── plugins/        # 插件
├── public/         # 静态文件
├── server/         # 自定义服务器代码 (API routes, Middlewares)
├── stores/         # Pinia stores
├── nuxt.config.ts  # Nuxt 配置文件
└── package.json    # 项目的依赖关系

这是一个比较经典的项目结构，相关内容读者可以自行查看。

配置 nuxt.config.ts

在上面的文件中nuxt.config.ts用来进行Nuxt的全局配置操作，我们可以在这个配置文件中添加Nuxt相关的路由、插件、模块配置操作。如下所示。

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true, // 启用服务端渲染 (SSR)
  modules: [
    // 在这里添加Nuxt模块，例如：'@nuxtjs/axios'
  ],
  css: [
    // 全局样式
  ],
  build: {
    // 构建配置
  }
})

创建页面和组件

我们可以在page目录下创建自己的Vue页面，然后每个文件将会被映射为一个路由映射，例如我们可以创建一个名为pages/index.vue的文件，如下所示

<script setup>
  // 这里可以使用 Composition API
</script>

那么这个页面就会对应应用程序中的根路径 (/)。

启动开发服务器

安装配置完成之后，接下来我们就可以使用开发工具启动项目了，通过如下的命令进行启动。

npm run dev

开发服务器启动后，我们就可以尝试访问http://localhost:3000，就可以看到对应的Nuxt应用程序了。

使用API与中间件

我们也可以在server目录中创建API路由和中间件操作，例如我们可以在对应的目录下创建名为hello.ts的文件，内容如下。

export default defineEventHandler((event) => {
  return { message: 'Hello, world!' }
})

然后我们可以通过
http://localhost:3000/api/hello请求访问的对应的API路由操作

总结

通过上面的步骤，我们就完成了在Vue3中利用Nuxt实现服务端渲染操作，我们可以将Nuxt3部署到任何的平台上，包括 Vercel、Netlify、Node.js等进行服务配置提供，通过Nuxt3提供的各种便利的操作，使得SSR开发变得非常简单高效。