javascript - 如何在 Web 应用程序中实现实时预览功能？

Question

基本上，我们使用 headless (headless) CMS 来编辑网站 A 上的内容。我们正在基于 headless (headless) CMS API(称为网站 CMS)构建我们自己的 CMS UI。

现在，我们在网站 CMS 中有了这个页面，您可以在其中编辑左侧面板中的内容，并在右侧面板(移动 View )中预览网站 A。

我以前没有做过这样的事情，我想知道完成这个的最好方法是什么，是否有任何库可以帮助实现这个功能。

一些想法:

1. 将网站 A 嵌入到网站 CMS 中，在左侧面板上所做的任何更改基本上只会刷新网站 A(它只是嵌入到页面中)。
2. 将网站 A 重新创建为网站 CMS 中的一个页面并调用相同的 API，以便在网站 CMS 的网站 A 和实际网站 A 上都发生更改。(尽管我看不出这有什么好处，并且会创建完全相同页面的 2 个独立代码库)。
3. 其他???

我们使用的主要框架是用于此 CMS UI 的 ReactJs。

Answer 1

选项 2 是我会做的，不一定是重复的。

您可能希望用户能够在不发布更改的情况下预览更改。因此，移植真实网站不符合该目标。

代码重复可能会最少。它会共享大部分相同的代码，而且传播速度也会快得多。