reactjs - Sharing on social media, the URL does not render any meta data

Question

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.

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