首页 > 解决方案 > 与服务器端呈现的 html 页面的单一 SPA 集成

问题描述

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

现在,我们需要将此应用程序与另一个反应应用程序结合起来。所以,它应该像微前端架构。

为此,我正在评估框架 Single-SPA,当我们有单独的前端项目并且需要将它们组合成一个时,这似乎是一个不错的选择。

是否可以将现有的 SSR 页面与 Single-SPA 集成?

标签: spring-bootthymeleafsingle-spa

解决方案


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

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

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


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


推荐阅读