可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

We have built a project (Web Application) in React .net core using react in client-side rendering.

We've used react-helmet for dynamically assigning meta tags.

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".

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.

Others we came across were "react-snap", "react-snapshot", but no luck with 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 is not a function

(hydrate concerns the react-dom)

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)?

Main goal: Social Applications should render the meta data when we paste/share the URL within them.

回答1:

Prerender is the only solution. I used a node dependency called "prerender" -> https://github.com/prerender/prerender

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.

It worked for me.

回答2:

The meta tags for Open Graph need to be present in the HTML which is sent back to the client when fetching a URL. Browsers or bots will not wait until the app is rendered on the client side to determine what the metatags are - they will only look at the initially loaded HTML.

If you need the content of your Open Graph metadata to be dynamic (showing different content depending on the URL, device, browser etc.) you need to add something like react-meta-tags into your server code.

There are no type definitions available for any of the react meta tags libraries, but you can add your own. It can be a bit tricky, but check out the official documentation and the templates they have provided to get started.

If you don't need it to be dynamic, you could add the tags into the static parts of the <head>-tag in your index.html.