Nuxt 3 的 SSR、路由与数据获取
在 Vue 基础上学习文件路由、服务端渲染、数据获取、SEO 和 Nitro 服务能力。
先用白话理解
它到底是什么？
Nuxt 是建立在 Vue 之上的应用框架。它提前约定了路由、数据获取、服务端渲染和项目目录，让你更容易搭建内容站与完整 Web 应用。
学习判断
现在适不适合学？
满足左侧情况可以开始；如果更符合右侧情况，先补基础通常更省时间。
- 已经熟悉 Vue 3 和组合式 API
- 需要开发内容站、产品官网或带 SEO 的应用
- 希望在 Vue 项目中加入服务端接口和混合渲染
- Vue 组件、路由和异步请求仍不熟练
- 还不能解释客户端和服务端的区别
- 项目只是一个简单的纯客户端工具且没有 SSR 需求
学习前提
开始之前先会这些
- 熟练使用 Vue 组件和组合式 API
- 理解客户端与服务端的区别
- 了解 HTTP 请求、状态码和基本 SEO
核心概念
先抓住这三个重点
文件路由
pages 目录中的文件会生成 URL，动态参数使用方括号文件名。
SSR 与水合
服务端先生成 HTML，浏览器再接管交互；两端初始输出不一致会产生水合问题。
数据获取
useAsyncData 和 useFetch 能在 SSR 场景中复用服务端数据，避免客户端重复请求。
最小示例
在页面中获取服务端数据
真实项目还需要定义返回类型，并处理加载、空数据和重试状态。
Nuxt 3可以复制运行
<script setup lang="ts">
const { data, error } = await useFetch('/api/posts')
</script>
<template>
<p v-if="error">加载失败</p>
<ul v-else><li v-for="post in data" :key="post.id">{{ post.title }}</li></ul>
</template>动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成，说明你已经开始掌握这项技术。
- 01
创建静态页和动态详情页
- 02
使用 useFetch 获取服务端数据并处理错误状态
- 03
为页面增加 SEO、站点地图和一条 Nitro API
初学者常见误区
- 在服务端执行只存在于浏览器的 window 或 document。
- 把所有页面都强制 SSR，却没有评估缓存和服务器成本。
- 同时使用多套请求方式导致数据重复获取。
学完后的检查清单
- 会创建静态和动态页面路由
- 理解 useFetch 的服务端执行行为
- 能设置基础 SEO 和路由规则
官方资料