如何在ReactJS中设置动态元标签以获得漂亮的分享链接？

Question

该应用程序

该应用程序是使用 ReactJS、React Router Dom、Styled Components 和 Redux ducks 制作的。

我们使用的后端也是我们使用 Amazon Amplify 和 GraphQL 制作的。

目标

我们需要定义应用程序页面之一的元标记，以便可以使用 OpenGraphic 元标记等在社交网络中向用户共享个性化链接。

问题

该项目是用 ReactJS 制作的，ReactJS 只有一个 HTML 页面作为根（/public/index.html），这样，所有内容都是用根标签中的 Javascript 生成的，当它到达浏览器时，它会被转译，如我们已经知道了。问题在于，负责理解元标记的爬虫无法理解 Javascript，最终无法找到我在需要共享链接的页面上定义的动态数据。他们知道只有一个 html 文件。

---

尝试解决问题

1)在 /public/index.html 文件本身中定义元标记

该解决方案不起作用，因为我们使用的数据是动态的，而index.html文件是静态文件

2）使用反应头盔

该解决方案允许定义元标记，但正如已经提到的，爬虫不懂JS。因此，尽管元标记位于页面上，但共享链接时不会出现。

3）使用一些SSR技术

这是一个可能的解决方案，但我们无法将任何 SSR 框架集成到 React 中。并且改变项目的基础技术也是不可行的。例如，我们不能只是从 React 切换到 Next，因为项目已经完成了。

4）使用由express.js和React应用程序制作的小型服务器，用string.replace()模拟SSR之类的东西来替换index.html中的元标记

这个解决方案有效，但它会导致每次访问页面时发出两个请求，一次由express.js发出，一次由React在前端发出。由于请求数量不断增加，该方案被废弃。但如果有必要，你可以这样做。在这种情况下，还需要检查 Amplify 是否可以使应用程序和小型服务器在同一项目中运行。

5）使用react-snap和react-helmet

React-snap 允许您根据 React 项目的路由和链接创建其页面的 html 快照，这添加到 React-helmet 中生成了一个完美的解决方案，使网络爬虫在共享链接时可以很好地处理链接。但该解决方案不适用于动态路由。例如，/your-route/:id 是一个动态路由，需要完整定义 id。当尝试创建仅在设置 id 时才存在的路由的快照时，React-snap 会丢失。不幸的是，这个解决方案不起作用。

---

这些是我们用来尝试解决问题的解决方案，但目前还不可能。尝试 4 可能是解决该问题的最理想方法。但我们正在寻找不会产生返工和未来问题的最佳方法。如果有人知道更好的方法来做到这一点，将对我们有很大帮助！