第3章 第一棒：服务端渲染

第 3 章 · 第一棒：服务端渲染

章节摘要：接力赛正式鸣枪。本章盯住服务器这一棒：一次 SSR 请求从浏览器发出到返回 HTML，Nuxt 在服务端经历了哪些阶段；生命周期钩子挂在哪些节点上能让你插入自定义逻辑；数据获取为什么必须用 useAsyncData 系列而不是裸 fetch；以及 SSG、ISR、混合渲染如何改变第一棒的跑法。读完本章，"页面是怎么变成 HTML 的"这件事对你应该不再有黑箱。

本章接力任务

阅读完本章，你应当能够：

1. 按顺序说出一次 SSR 请求在服务端的执行阶段：中间件、插件、setup 执行、渲染成 HTML、payload 注入；
2. 说出 useAsyncData 与 useFetch 的关系，以及它们相较裸 fetch 的四个增量（去重、序列化、阻塞导航、错误管理）；
3. 解释 setup 函数在 SSR 与客户端各执行几次、哪些代码只在其中一端运行、.server 与 .client 修饰符怎么用；
4. 列出常用生命周期钩子（app:created、page:start、render:response 等）的触发时机与典型用法；
5. 用 nuxt generate 产出静态站点，说明预渲染的页面清单从哪来；
6. 用 routeRules 给不同路由分别配置 swr、isr、prerender、ssr:false，并解释各自的缓存行为。

接力全景图

一句话点题：第一棒的目标是让浏览器拿到的第一份响应里就有可读的内容，而水合所需的交接物资（payload）也在这份响应里一并交付。

各棒次导览

3.1 SSR 执行流程与生命周期钩子

拆开服务端这一棒的内部动作：从请求进来到 HTML 出去的八步管线（配全景图），钩子能挂哪些节点，setup 在两端各执行几次、.server 与 .client 修饰符怎么用。3.2 的取数时机、5.2 的中间件位置、6.2 的服务端拦截，全都以这节的管线图为坐标系——值得多读一遍。

3.2 useAsyncData 与 useFetch

数据获取的第一棒专属工具。为什么服务端取数不能用裸 fetch，去重与序列化怎么工作，选项怎么配——这是全册被引用频率最高的一节。

3.3 SSG 与混合渲染策略

第一棒的变奏：把渲染提前到构建期（SSG）、缓存后定时再生（ISR/SWR）、按路由逐页配模式（routeRules），把 1.2 的选型表落成配置。

节与节怎么衔接

三节从"一次请求怎么跑"到"数据怎么等"再到"整个站点怎么排棒"，粒度从微观到宏观。

3.1 请求管线 ──► 3.2 管线中的取数 ──► 3.3 整站的棒次编排
   (单次视角)        (数据视角)          (站点视角)
        │                  │
        └─ setup 执行次数   └─ payload 序列化
           是水合问题的根     直接通向第4章交接区
​

3.2 结尾提到的 payload，正是第 4 章水合的输入；3.3 的 routeRules 为第 9 章按路由选择部署形态提供依据。

赛前热身与后续赛程

• 前置知识：第 1、2 章的项目与目录约定；对异步函数、Promise 有基本概念。
• 学习提示：3.2 是全册引用频率最高的一节——后面讲状态、讲接口、讲测试都会回到 useAsyncData 的行为约定，值得逐段精读并跑通示例。3.3 的时间页实验只要五分钟，却能把 swr 的缓存行为变成肌肉记忆，别跳过。3.1 的管线图看不进书时，可以对照 DevTools 的请求时间线换个角度理解。
• 后续赛程：第 4 章接过本章交付的 HTML 与 payload，讲浏览器如何水合、状态如何序列化——那是交接区的故事，也是排错高发地。本章建立的"数据阻塞渲染、payload 同车交付"两个事实，是理解水合的前提。