Angular Academy · 课时

将状态传输到客户端

Q: 「将状态传输到客户端」这节课中我会学到什么？

使用状态传输避免重复请求 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用状态传输避免重复请求

将状态传输到客户端 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

重复获取问题

SSR 期间，服务器会获取数据来渲染 HTML。如果没有额外处理，客户端会在水合后再次获取相同数据，既浪费请求，又可能导致内容闪烁。

TransferState 来解决

Angular 的 TransferState 会将服务器上的数据序列化到 HTML 中，然后由客户端读取，而不是重新获取。数据会通过响应中的脚本标签传递。

数据如何传递

服务器保存的状态会以 JSON 形式嵌入页面。客户端启动时会将其反序列化，因此首次渲染使用的就是服务器使用过的相同数据。

<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>

使用 makeStateKey

使用 makeStateKey 创建一个带类型的键，然后通过 TransferState 服务读取或写入数据。

import { makeStateKey, TransferState } from '@angular/core';

const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);

先读取再获取模式

在服务器和客户端上都执行以下逻辑：如果 TransferState 中存在该键，就使用其中的数据；否则就获取数据。服务器负责获取并存储，客户端找到已存储的值后跳过调用。

const state = inject(TransferState);
if (state.hasKey(USERS)) {
  this.users = state.get(USERS, []);
} else {
  this.http.get<User[]>('/api/users')
    .subscribe(u => { this.users = u; state.set(USERS, u); });
}

HttpClient 会自动完成

调用 provideClientHydration(withHttpTransferCacheOptions())（启用水合时默认开启）后，HttpClient 会将服务器的 GET 响应缓存到 TransferState 中，因此相同的客户端请求可以直接从缓存提供，无需手动创建键。

provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))

避免内容闪烁

由于客户端会复用传递过来的数据，水合后的视图会与服务器 HTML 完全一致，从而避免内容消失并重新加载时产生的闪现。

安全提示

传递的状态会嵌入公开 HTML。切勿将秘密、令牌或不应暴露在页面源代码中的用户私有数据放入 TransferState。

自定义方式与自动方式

HTTP 传输缓存会自动覆盖大多数基于 GET 的数据获取。对于希望从服务器传递到客户端的非 HTTP 计算状态，请使用手动的 makeStateKey。

缓存范围

HTTP 传输缓存按请求隔离，并在客户端使用一次。首次匹配的客户端请求读取缓存后，后续调用会像往常一样访问网络。

验证是否生效

检查 SSR 响应，查找其中嵌入的状态脚本。在浏览器的网络标签页中，您应该能看到水合后紧接着跳过了重复获取。

快速检查

检查您对状态传递的掌握情况。

回顾

您学会了使用 TransferState 和 makeStateKey 将数据从服务器传递到客户端，使用自动 HTTP 传输缓存，避免重复获取和内容闪烁，并避免将私有数据放入公开嵌入的状态中。

常见问题解答

「将状态传输到客户端」课时是免费的吗？

是的 — 「将状态传输到客户端」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「将状态传输到客户端」这节课中我会学到什么？

使用状态传输避免重复请求你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「将状态传输到客户端」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy