You're absolutely right that Facebook and Twitter's crawlers don’t process JavaScript, so changes you make with libraries like react-helmet won’t be picked up.

However, there are alternatives to SSR that work just as well:

Use pre-rendering: Pre-rendering tools like React Snap or services like PreRender.io generate static HTML versions of your pages. These tools execute your JavaScript and save the resulting HTML so crawlers can see your meta tags.

Add static meta tags for key pages: For critical pages like your homepage or popular blog posts, you can add meta tags directly in the public/index.html file. This ensures they are available to crawlers, even without JavaScript.

Use a headless CMS: A content management system like WordPress, Strapi, or Contentful lets you manage meta tags for each page dynamically. You can integrate the CMS to generate meta tags during your build process or pre-rendering step.

Test with social tools:

After adding meta tags, always test them using:

Facebook Sharing Debugger Twitter Card Validator

What’s the simplest solution?

If you don’t want to dive into pre-rendering or CMS setups, start by manually adding static meta tags for your most important pages. You can gradually scale up with pre-rendering as needed.

This way, when someone shares your blog or page on Facebook or Twitter, the title, description, and image you want will show up without needing SSR.