javascript - 在 Angular 中生成动态元标签并使其实际显示在 Twitter 风格的卡片预览中？

Question

我正在构建一个动态网站。有一个 Java 应用程序提供 REST-ish JSON API 和 Angular9 前端。我希望能够在 Twitter、Slack 或其他任何支持 Twitter 卡式预览的地方发布指向应用内特定 URL 的链接，并让周围环境展开特定于该单独虚拟“页面”的动态预览在我的单页应用程序中。

我正在使用 Angular 的 Meta服务并成功在页面上设置元标记，但显然要等到 JS 运行时才会发生。我发现尽早加载元标记以供 Twitter 或 Slack 使用的唯一方法是将它们硬编码到我的 index.html 中。我听说 Google 和 Bing 的爬虫会在索引期间运行客户端 JS，但据我所知，Twitter 和 Slack 的卡片预览机制不会。我还没有测试过 Facebook 或其他任何东西，但我预计会有类似的结果。目前，我不关心这个应用程序的 SEO，因此 Google/Bing 的东西对我没有帮助。

现在，显然，一种选择是用服务器端语言重新实现我的动态代码的一部分，并让服务器动态生成index.html，但是我真的不想这样做。 目前，我的 UI 和 API 之间的关注点得到了很好的分离；一切都干净整洁。我的后端服务器非常好且轻量级，没有任何我需要引入的库。

如果重要的话，前端由 nginx 提供服务。在开发阶段，nginx 和 Java 后端运行在同一主机上，但就目前情况而言，我没有理由不能将它们分开，而且我不想改变这一点。

动态生成的内容是使用构建时不可用的 URL 部分从数据库中查找的，因此使用底层数据重新生成静态 index.html 不是一个选项，而且 Angular 的本质是单页应用程序不允许拥有多个静态 HTML 源文件。

我是否缺少一个可行的选项？我希望还有一些额外的<meta>我可以将标签添加到我的源代码中，告诉周围环境在读取其余标签之前运行 JS，但我找不到任何证据表明存在这样的事情。

编辑:正如我期望这个问题的技术答案是“不，你没有错过任何东西；你必须在服务器端完成它”，我对一个子问题的答案感兴趣:如何最好地做这不会破坏我的关注点分离？

我的想法是:在后端创建一个 API，可以生成元标记，或者至少生成要在元标记中使用的摘要、标题、描述和图像 URL。然后在 UI 端运行一些轻量级的东西，并配置 nginx 来代理对 index.html(或其替代品)的请求。然后，该东西会形成对后端的请求，并将结果拼接到页面中，然后将其返回给 nginx。我唯一的服务器端动态体验是使用 Java(对于这个来说太重了)和 PHP ( ew )。有什么是高性能、轻量级(就 RAM 而言)、能够调用 REST API，然后将结果内容插入到 HTML 文档中而不需要太多麻烦的？我想我可以使用 Django、Rails、Node.js、Flask 以及可能还有一百种其他东西来完成所有这些。

Answer 1

https://angular.io/guide/universal

您应该研究 Angular SSR。