Nuxt 3 完全支持 服务端渲染（SSR，Server-Side Rendering），并且相较于 Nuxt 2 做了很多优化，尤其是对性能和开发体验的提升。
Nuxt 3 是基于 Vue 3 构建的，默认就是一个 Universal（SSR + 客户端渲染） 框架，这意味着它可以在服务器上预渲染页面，然后再将控制权交给客户端的 Vue.js 应用。通过这种方式，初始页面会更快显示出来，并且可以提升 SEO 性能。
Nuxt 3 的 SSR 是默认启用的，所以你不需要额外的配置来启动它。不过，你可以通过一些简单的步骤来构建和优化一个 SSR 应用。
创建一个 Nuxt 3 项目
可以使用以下命令创建一个新的 Nuxt 3 项目：
npx nuxi@latest init my-nuxt3-app
或者
npx create-nuxt-appp my-nuxt3-app
cd my-nuxt3-app
npm install
这会创建一个新的 Nuxt 3 项目，并安装所有的依赖。
Nuxt 3 的基本项目结构
Nuxt 3 的项目结构与 Nuxt 2 相似，主要文件夹包括：
- pages/：用于定义页面，每个 .vue 文件会自动成为路由。
- components/：用于定义复用的组件。
- app.vue：应用的全局布局和入口文件。
- nuxt.config.ts：Nuxt 的配置文件，可以用来定制应用的行为。
创建一个简单的 SSR 页面
在 pages/ 文件夹下创建一个 index.vue 文件，展示一个服务端渲染的页面。
<!-- pages/index.vue -->
<template>
<div>
<h1>Nuxt 3 SSR Example</h1>
<p>{{ message }}</p>
</div>
</template>
<script setup>
const message = 'Welcome to Nuxt 3 with SSR!'
</script>
<style scoped>
h1 {
color: #3498db;
}
</style>
使用 SSR 获取数据
与 Nuxt 2 类似，Nuxt 3 也有用于处理服务端渲染的数据获取方法。你可以使用 useAsyncData 钩子来在服务端获取数据。
示例代码：使用 useAsyncData 从外部 API 获取数据 使用 useAsyncData 来获取外部数据并渲染到页面中。
<!-- pages/index.vue -->
<template>
<div>
<h1>Nuxt 3 SSR Example with Async Data</h1>
<ul>
<li v-for="(post, index) in posts" :key="index">{{ post.title }}</li>
</ul>
</div>
</template>
<script setup>
import { useAsyncData } from '#app'
// 从 API 获取数据
const { data: posts } = await useAsyncData('posts', () => $fetch('https://jsonplaceholder.typicode.com/posts'))
</script>
<style scoped>
h1 {
color: #2ecc71;
}
</style>
app.vue修改代码为
<template>
<div>
<!-- <NuxtRouteAnnouncer />-->
<!-- <NuxtWelcome />-->
<index/>
</div>
</template>
<script>
import index from '~/pages/index.vue';
import {defineComponent} from "vue";
import Index from "~/pages/index.vue";
export default defineComponent({
components: {Index}
})
</script>
代码解析
-
useAsyncData：这是 Nuxt 3 中用于在服务端或客户端获取异步数据的钩子。与 Nuxt 2 的 asyncData 类似，它会在页面渲染时获取数据。
-
$fetch：这是 Nuxt 3 提供的轻量级的 fetch 封装工具，帮助你从外部 API 获取数据。
启动 Nuxt 3 SSR 应用
运行以下命令来启动 Nuxt 3 的开发服务器
npm run dev
现在，你可以在浏览器中访问 http://localhost:3000，并查看你的 SSR 页面。页面的数据将会在服务端获取，并在客户端渲染。
Nuxt 3 的生产构建与部署
当你准备将应用部署到生产环境时，可以运行以下命令进行构建和启动：
npm run build
npm run start
- npm run build：构建生产环境的应用，包括服务端和客户端的代码。
- npm run start：以生产模式启动应用。
Nuxt 3 SSR 的其他功能
Nuxt 3 还提供了一些有助于 SSR 的高级功能：
- 动态路由：通过 pages/ 目录中的文件命名，Nuxt 会自动生成动态路由，SSR 会根据请求的路径进行渲染。
- 中间件：你可以使用中间件在请求和页面渲染之前执行一些逻辑，比如用户验证或权限检查。
- 缓存和优化：Nuxt 3 提供了更好的缓存和性能优化方案，确保 SSR 应用在高流量场景下依旧高效运行。
总结
- Nuxt 3 默认支持 SSR，无需额外配置。
- 你可以通过 useAsyncData 来轻松获取异步数据，并在服务端渲染时预加载内容。
- 相较于 Nuxt 2，Nuxt 3 基于 Vue 3 构建，提供了更快的性能和更现代化的开发体验。