SOLVED: React App with dynamic meta tags without SSR?

I wrote a blog post about it sometime back, it's not detailed, but I think you will understand.

EDIT: Updated the blog post and added a tutorial

How To Add Meta Tags in Client-side React App

TLDR: serve your index.html using express or something and replace dynamic tags based on a JSON config.

After exploring a few different options, I've now solved this for my use case. Thanks again to @sachinverma and @joshtronic for your comments!

I first considered rebuilding everything to full SSR with Next.js but figured that would be overblown at this point (want to launch an MVP first).

My final solution for dynamically inserting meta tags albeit sticking with a client rendered create-react-app setup now looks like this (I currently use the full stack of Firebase, including Hosting and Cloud Functions):

I add the meta tags to the pages dynamically with React Helmet (https://www.npmjs.com/package/react-helmet), since I'm making a database query to get the right information for dynamic routes, this is way too slow to be picked up by most web crawlers.

Thus I implemented http://prerender.io/ - this will detect crawlers, cache the appropriate sites and serve the appropriate sites.

To get this working, I copy the index.html into the Firebase Cloud functions folder on build (package.json: "build": "react-scripts build && cp build/index.html functions/web/index.html").

Then in the firebase.json config, instead of rewriting routes directly to index.html, I send all requests through a Firebase Cloud Function:
{
"source": "**",
"function": "preRender"
}

Finally, my cloud function takes all requests and serves the index.html but uses the prerender.io middleware (that will detect crawlers and serve from cache):

const fs = require("fs")
const express = require("express")
const preRender = express()

preRender.use(
    require("prerender-node").set("prerenderToken", "PRERENDER_TOKEN")
)

preRender.get("*", (req, res) => {
    res.status(200).send(fs.readFileSync("./web/index.html").toString())
})

exports.preRender = functions.https.onRequest(preRender)`

The prerender.io pricing, of course, gets expensive if you're serving lots of sites. Until I reach scale, this is no concern for me, in the future, I might just build my own script for caching and serving sites to crawlers using puppeteer (https://developers.google.com/web/tools/puppeteer) and spider-detector (https://www.npmjs.com/package/spider-detector) as outlined i.e. here: https://medium.com/front-end-weekly/building-a-pre-renderer-for-spas-108f956f8b

I hope this can help some other folks trying to do SEO / link previews with a client rendered React app, I might put this into a better-structured blog post down the road. ✌🏻

Yeah, pretty sure that's still an accurate caveat to SPAs.

How are you serving your index.html file, coming out of Node+Express/PHP/etc or served directly from say, nginx or apache?

If you are serving it up statically, could make a small adjustment to serve just the index.html up from a dynamic server and inject what you need in it, applicable ONLY on the first page load (which I presume is how most indexing/bot systems will hit it). Saves from having to setup a whole caching layer for serving up cached pages and all of that stuff.