WHY IT MATTERS
先用一句白话理解
如果 Vue 是一套好用的厨房工具，Nuxt 就是已经规划好前厅、后厨、仓库和出餐口的整间餐厅。
LEARNING OUTCOMES
学完你能做到什么
理解 Nuxt 4 的 app、server 与 shared 目录边界
掌握页面、布局、中间件、插件和自动导入
正确使用 useFetch、useAsyncData 与共享数据缓存
用 Nitro 编写服务端路由，并管理运行时配置与 Cookie
完成 SSR、预渲染、混合渲染、SEO 与平台部署
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
Nuxt 4 项目结构
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Pages 与 Layouts
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Middleware 与 Plugins
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
useFetch 与 useAsyncData
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Nitro Server Routes
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Runtime Config
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
混合渲染
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
SEO 与 Nuxt Content
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
类型上下文与部署
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
完成带布局、动态路由和错误页的课程站
实现服务端搜索接口与客户端共享请求缓存
为公开课程、用户中心和后台分别配置渲染策略
验证服务端配置不会泄漏到客户端产物
HANDS-ON PROJECT
动手任务
构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。
交付清单
- ✓app/server/shared 目录职责说明
- ✓数据读取与缓存时序图
- ✓多路由渲染规则和部署说明
MINIMUM RUNNABLE CODE
Nuxt 4 页面中的共享异步数据
<script setup lang="ts">
const { data: lessons, status, refresh } = await useAsyncData(
"featured-lessons",
async () => ["组件思维", "服务端渲染", "生产部署"],
);
</script>
<template>
<main>
<p v-if="status === 'pending'">加载中...</p>
<ul v-else>
<li v-for="lesson in lessons" :key="lesson">{{ lesson }}</li>
</ul>
<button type="button" @click="refresh">刷新</button>
</main>
</template>先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 完成带布局、动态路由和错误页的课程站
- 实现服务端搜索接口与客户端共享请求缓存
- 为公开课程、用户中心和后台分别配置渲染策略
- 验证服务端配置不会泄漏到客户端产物
改变约束，验证你真的理解
- 不看教程，独立完成：理解 Nuxt 4 的 app、server 与 shared 目录边界
- 不看教程，独立完成：掌握页面、布局、中间件、插件和自动导入
- 不看教程，独立完成：正确使用 useFetch、useAsyncData 与共享数据缓存
- 不看教程，独立完成：用 Nitro 编写服务端路由，并管理运行时配置与 Cookie
- 不看教程，独立完成：完成 SSR、预渲染、混合渲染、SEO 与平台部署
把实验变成能交付的工程
- app/server/shared 目录职责说明
- 数据读取与缓存时序图
- 多路由渲染规则和部署说明
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
在服务端和客户端重复请求同一份首屏数据
所有配置都放到 public runtimeConfig，造成秘密泄漏
忽略相同 useAsyncData key 的共享行为和清理时机
照搬 Nuxt 3 目录示例而忽略 Nuxt 4 的 app 结构
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
学习 Nuxt 4 的 app 目录、自动导入、数据层、Nitro 服务端与混合渲染，用约定优于配置的方式交付内容与业务系统。
Q02如果只能保留三个验收结果，应该保留什么？＋
app/server/shared 目录职责说明；数据读取与缓存时序图；多路由渲染规则和部署说明
Q03学习过程中最需要主动避免什么？＋
在服务端和客户端重复请求同一份首屏数据；所有配置都放到 public runtimeConfig，造成秘密泄漏；忽略相同 useAsyncData key 的共享行为和清理时机；照搬 Nuxt 3 目录示例而忽略 Nuxt 4 的 app 结构
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“构建支持 Markdown 内容、全文搜索、用户收藏、编辑预览和 SEO 的知识库。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：理解 Nuxt 4 的 app、server 与 shared 目录边界
- □核心机制已用最小实验验证：完成带布局、动态路由和错误页的课程站
- □风险已检查：在服务端和客户端重复请求同一份首屏数据
- □风险已检查：所有配置都放到 public runtimeConfig，造成秘密泄漏
- □风险已检查：忽略相同 useAsyncData key 的共享行为和清理时机
- □风险已检查：照搬 Nuxt 3 目录示例而忽略 Nuxt 4 的 app 结构
- □交付物可复现：app/server/shared 目录职责说明
- □交付物可复现：数据读取与缓存时序图
- □交付物可复现：多路由渲染规则和部署说明
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。