Skip to content

第八章|SSR 与 Nuxt ​

从 HTML 在哪里生成开始,区分服务端输出、状态传递和客户端水合。继续观察请求隔离、流式失败、元信息与敏感数据边界,再学习 Nuxt 中的延迟水合。

阅读前需要什么 ​

需要组件生命周期、路由、异步资源和第七章的渲染概念。先按第 01 篇建立 Nuxt 最小项目;流式输出使用单独的 Node 实验,正文会分别标明入口。

这一章怎样连起来 ​

SSR 先生成 HTML,水合让客户端建立与它对应的组件和事件关系。传递的状态必须使两端首屏一致,同时保持服务端请求之间隔离。流式输出改变内容到达的过程,延迟水合改变交互建立的时间,不能混为同一个阶段。

阅读顺序 ​

  1. CSR、SSR 与 SSG
  2. 水合
  3. 服务端数据与客户端状态
  4. 异步组件与流式输出
  5. SEO 与元信息
  6. 安全边界
  7. Nuxt 4 与延迟水合

运行入口见Nuxt 最小项目。Node 流式输出实验单独运行,不能直接把它的渲染器放进 Nuxt 页面。

读完后能做什么 ​

分别观察禁用 JavaScript 后的原始 HTML、启用后的第一次交互,以及两次独立请求的数据。再单独触发流式组件错误或延迟水合,区分“服务端已经输出内容”和“客户端已经能够处理事件”。

先独立完成各篇练习,再对照本章答案。接着进入第九章|测试、工具与工程实践。

用心记录每一步成长