问题描述
我们已经在客户端渲染中使用react在.net核心中构建了一个项目(Web应用程序).
We have built a project (Web Application) in React .net core using react in client-side rendering.
我们已经使用react-helmet来动态分配元标签.
We've used react-helmet for dynamically assigning meta tags.
问题在于应用程序在浏览器中呈现的时间.浏览器在初始加载时仅获取静态HTML，其中不包含我们设置的动态元标记.但是，在检查时，您会在元素"下获得这些元标记.
The issue being when the app renders in the browser. The browser gets only the static HTML on initial load which does not include the dynamic meta tags we have set. However on inspecting you get those meta tags under "Elements".
此外，如果我们使用这些URL在任何社交媒体(如WhatsApp或Facebook)上共享，则URL不会呈现任何应有的元数据.
Also, if we use these URL for sharing on any social media, like WhatsApp or Facebook, the URL does not render any metadata as it should.
尝试寻找解决方案，我们遇到的最明显答案是尝试服务器端渲染.我们知道了，但是当我们准备好将应用程序推出时，尝试在此关头尝试并不是解决方案.
Tried searching for solutions to our problem, the most obvious answer we came across was to try server-side rendering instead. We get that, but it is not a solution to try out at this juncture when we're ready with app to roll it out.
我们遇到的其他内容是反应快照"，反应快照"，但没有运气使用react-snap时，它需要将React的版本升级到16+，这是我们做到的，但是我想并不是所有的依赖项都已升级，出现错误提示"
Others we came across were "react-snap", "react-snapshot", but no luckwith react-snap, it requires to upgrade React's version to 16+, which we did but I guess not all dependencies were upgraded, there was an error saying "
(水合物与反应域有关)
(hydrate concerns the react-dom)
使用react-snapshot，我们无法找到必需的类型定义，这是react .net核心正常运行所必需的
With react-snapshot, we could not find the necessary type definition, which is required in react .net core to function properly
请为下一步可能的步骤提供指导(预付款等已付款的除外)?
Please guide for the next probable step (except the paid ones like prerender, etc)?
主要目标:当我们在其中粘贴/共享URL时，社交应用程序应呈现元数据.
Main goal: Social Applications should render the meta data when we paste/share the URL within them.
推荐答案
Prerender是唯一的解决方案.我使用了一个名为"prerender"的节点依赖项-> https://github.com/prerender/prerender
Prerender is the only solution.I used a node dependency called "prerender" -> https://github.com/prerender/prerender
它可以启用允许发出http请求的Web服务器.将值分配给布尔值:window.prerenderReady = true;您的网站中的告诉您的服务器页面何时可以拍照"，并在返回时返回HTML.您需要编写一个简单的脚本来解析所有站点url，并将这些html内容保存到文件中.将它们上传到您的服务器，并使用.htaccess或类似目标将爬虫外部-hit-facebook，twitterbot，googlebot等作为目标.以向其他用户代理显示预渲染的版本和真实站点".
It works enabling a web server wich make http requests. Assigning value to a boolean: window.prerenderReady = true; in your website tells your server when the page is ready to "take the photo" and it returns the Html when so. You need to program an easy script that parses all the site urls and save those html contents to files. Upload them to your server and using .htaccess or similar target the crawlers external-hit-facebook,twitterbot,googlebot, etc.. to show them the prerendered version and 'the real site' to the rest of user-agents.
对我有用.
这篇关于在社交媒体上共享，URL不呈现任何元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！