单个SPA与服务器端呈现的html页面集成

Question

我有一个应用程序，其中UI在服务器端使用Thymeleaf呈现，后端在Spring Boot中。

现在，我们需要将此应用程序与另一个react应用程序组合在一起。因此，它应该类似于微前端架构。

为此，我正在评估框架Single-SPA，当我们有单独的前端项目时，这似乎是一个很好的选择，我们需要将它们组合在一起。

是否可以将现有的SSR页面与单SPA集成？

Answer 1

只要没有动态创建的JavaScript，single-spa-html就应该可以做到这一点。另一个限制是，由于浏览器的安全性，single-spa-html不能处理<script/>标签。如果您的应用程序能够满足这些要求，它应该能够与single-spa-html进行互操作。

single-spa-html允许异步提供模板，因此fetch或ajax调用可以从后端检索微前端模板。然后，相应的JavaScript被包含在微前端中，而不是标记在其中的脚本。

您还可以在此处查看使用JS增强静态html mfe的示例：https://github.com/filoxo/single-spa-html-with-js-example/

注意:我相信我们在Slack频道上讨论过这个问题，但我想在这里分享给更广泛的单一水疗社区。