在我的 Vue SPA 中打开图元标记图像的最快方法是什么？

Question

我有一个使用 Vite 的 Vue 3 单页应用程序，并部署在 AWS Amplify 上（仅限前端）。该应用程序涉及 NFT，重要的是在社交网站（尤其是 Facebook、Instagram 和 Twitter）上共享的链接在共享指向其视图的链接时呈现特定 NFT 的图像。在一个单独的存储库中，在不同的域下，我们有一个简单的 Express API，它在 Vue 应用程序的几个地方被调用。

我研究了解决这个问题的选项，并提出了一些选项：

1. 在像 Nuxt.js 这样的 SSR 框架中完全重写（这里的路由是最大的障碍）
2. 在每次部署前进行预渲染。我不确定这是否适合我们的用例。 NFT 视图的 URL 是动态的（

   {baseURL}/nft/{UUID_OF_NFT}

   ），可以在平台上创建 NFT。
3. 在 Lambda Edge 函数中编写一些逻辑，检查请求是否来自机器人/爬虫，如果是，则对数据库进行一些调用，返回一些带有适当元标记的 HTML。如果不渲染 SPA。

我还没有成功使用这些选项中的任何一个。我需要帮助来确定我是否错过了任何能让我更快到达那里的选项，或者这里的哪个选项被认为是最可行和最简单的。涉及最少努力的选项将是首选。

对于选项 1，我尝试为

vue-ssr

实现 vite 模板。我永远无法让它在本地运行，因为我的一些依赖项与 SSR 不兼容。在确定哪些依赖项应该仅供客户端使用后，可能会有前进的方向。

我还没有给出选项 2 和诚实的尝试，因为它对我来说似乎是最不受欢迎的。

对于选项 3，我尝试通过 CLI 拉下我的 Amplify 项目，但它失败了，因为没有与之关联的后端环境。它仅作为前端部署在 Amplify 上。我相信需要一个后端环境来添加 Lambda Edge 功能。