我们在 React .net 核心中构建了一个项目(Web 应用程序),在客户端渲染中使用了 React。
我们使用 react-helmet 来动态分配元标签。
问题出在应用程序在浏览器中呈现时。浏览器在初始加载时仅获取静态 HTML,其中不包括我们设置的动态元标记。但是,在检查时,您会在“元素”下获得那些元标记。
此外,如果我们使用这些 URL 在任何社交媒体(如 WhatsApp 或 Facebook)上共享,该 URL 不会按应有的方式呈现任何元数据。
尝试寻找我们问题的解决方案,我们遇到的最明显的答案是尝试服务器端渲染。我们明白这一点,但在我们准备好推出应用程序时,这不是一个尝试的解决方案。
我们遇到的其他是“react-snap”、“react-snapshot”,但运气不好 使用 react-snap,它需要将 React 的版本升级到 16+,我们做到了,但我猜并不是所有的依赖项都升级了,有一个错误说“
hydrate is not a function
(hydrate 涉及 react-dom)
使用 react-snapshot,我们找不到必要的类型定义,这是 react .net core 正常运行所必需的
请指导下一个可能的步骤(预渲染等付费步骤除外)?
主要目标:当我们在其中粘贴/共享 URL 时,社交应用程序应呈现元数据。
最佳答案
预渲染是唯一的解决方案。 我使用了一个名为“prerender”的节点依赖 -> https://github.com/prerender/prerender
它可以使 Web 服务器发出 http 请求。为 bool 值赋值:window.prerenderReady = true;在您的网站中告诉您的服务器页面何时准备好“拍照”,并在准备好时返回 Html。您需要编写一个简单的脚本来解析所有站点 url 并将这些 html 内容保存到文件中。将它们上传到您的服务器,并使用 .htaccess 或类似目标抓取工具 external-hit-facebook、twitterbot、googlebot 等。向其他用户代理显示预渲染版本和“真实站点”。
它对我有用。
关于reactjs - 在社交媒体上分享,URL 不呈现任何元数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50968603/