Javascript 在Angular中生成动态元标记，并让它实际显示在Twitter样式的卡片预览中？

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

我正在使用Angular的

Meta

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

现在，很明显，一种选择是用服务器端语言重新实现我的动态代码的一部分，让服务器动态生成index.html，但我真的不想这样做。我目前在UI和API之间有一个很好的分离；一切都很好，干净。我的后端服务器很好而且轻量级，没有我需要介绍的任何库

如果有必要，前端由nginx提供服务。在开发阶段，nginx和Java后端运行在同一台主机上，但目前来看，我没有理由不将它们分开，我不想改变这一点

动态生成的内容是使用构建时不可用的URL的一部分从数据库中查找的，因此使用基础数据重新生成static index.html不是一个选项，Angular作为一个单页应用程序的性质阻止了具有多个静态html源文件

我是否错过了一个可行的选择？我希望有一些额外的

标记可以添加到我的源代码中，告诉周围的环境在阅读其余的标记之前运行JS，但是我没有找到证据证明存在这样的东西

编辑：我希望这个问题的技术答案是“不，你没有遗漏任何东西；你必须在服务器端完成”，我想回答一个子问题：如何最好地做到这一点而不破坏我的关注点分离

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

你应该研究角度SSR

---

你应该研究角度SSR

如果您没有使用Angular Universal的服务器，您可以将index.html重命名为index.php，然后，对于每个页面请求，您可以在服务器上生成meta标记和title标记，但请确保它与Angular应用程序设置的元数据相同。这样，您就不必在服务器上呈现整个页面，只需呈现对社交媒体爬虫非常重要的部分。

如果您没有使用Angular Universal的服务器，您可以将index.html重命名为index.php，然后针对每个页面请求，您可以在服务器上生成meta标记和title标记，但请确保它与Angular应用程序设置的元数据相同。这样，您就不必在服务器上呈现整个页面，只需呈现对社交媒体爬虫非常重要的部分。

如果我理解正确，这就允许构建时动态性。我需要运行时的活力。新数据一直被生成到数据库中，我需要呈现到meta标记中的数据来自数据库。

SSR

是运行时的<代码>预渲染是生成时间。所以我认为它应该起作用。我将它与Vue和nuxt一起使用，效果非常好。我认为Angular应该也能做到这一点。查看该链接：“这就是为什么这个解决方案对小型应用程序很有用的原因。你可以看到，如果你有几百个页面，那将是多么痛苦。”我有成千上万个数据库驱动的URL（并且还在增长），它们都需要在其

meta

标记中包含独特的内容。我不是说你错了，但我不知道如何将这一点应用到我的情况中。另外，我的服务器是一个廉价的VPS，具有1GB的RAM以保持低成本。我对在我的基于Java的后端节点上运行一个中型Javascript应用程序并保持在内存占用范围内没有什么好感。我强烈希望将Angular应用程序保留在客户端，只使用一些小的东西来提供动态index.html。这与SEO无关。这是关于Twitter风格的预览。：）无论如何，我找不到任何文档告诉我如何将现有的客户端Angular应用程序转换为使用SSR，也找不到足够详细的文档来解释它是如何工作的，我自己也能弄清楚。您提供的链接解释了它是什么，似乎是为了阻止像我这样的用户选择它，但没有说明如何选择。如果我理解正确，这就允许构建时动态性。我需要运行时的活力。新数据一直被生成到数据库中，而