Angular Universal 和外部 API

Posted 2023-02-19

【中文标题】Angular Universal 和外部 API

【英文标题】：Angular Universal and external apis

【发布时间】：2018-08-20 10:01:17

【问题描述】：

搜索 angular universal 很多天后，我发现缺少关于 ServerSideRendering 实际工作原理的信息。 让我引导您解决我的担忧并帮助我澄清一些模糊点。

有很多指南告诉您如何设置 s-s-r 需要注意的事项，例如不访问 DOM 或不使用 jquery。 它们都没有真正展示角度通用在幕后的实际工作原理，尤其是当您访问外部 api 时。

我希望普通的 s-s-r 应用程序只在服务器上运行创建一些 html，然后加载 html，直到客户端下载 javascript 代码。 但是，如果使用外部 api，会发生什么情况？（这是一种非常常见的情况）。 我们的应用程序的服务器版本是否进行真实调用，从 api 获取真实数据，以使用 html 呈现？还是发生了其他事情？

如果是通过路由解析器调用的外部 api。在这种情况下 s-s-r 可能吗？这意味着我们的应用程序必须以任何方式等待 api 响应。

【参考方案1】：

还要确保调用的是同一个 API。

这是不同的路线：

api/ API

【参考方案2】：

当使用 Angular Universal 时，s-s-r 进程实际上会生成浏览器将下载的 html，并带有一些内联 css，以便快速渲染页面。之后，浏览器会为你的 Angular 应用下载 JS 文件，此时会发生一个转换，之后客户端 JS 应用会获得控制权。

您可以使用外部 API。如果您在 Angular 代码中调用了 API（例如在组件初始化中），那么该调用将在服务器端执行；这意味着 Angular Universal 将等待该调用完成，以便它可以使用检索到的数据来生成页面的 html

【讨论】：

那么在这种情况下你可以使用 prerender 以便通用 prerenders api 响应？

如果您的内容不经常更改（更改时，您应该删除缓存的 html 文件），预渲染非常有用

有没有办法在服务器端为该 API 使用浏览器凭据，例如 withCredentials: true？我们往往只会得到 403。

为什么这不是我的情况？我在 init 上进行 API 调用并等待一个 observable 但调用结束时没有呈现 html...