I have built a web app using create-react-app and react-router. It is served by an express server on the backend which also runs a GraphQL API. The front end of the website is served by express using the following code:
// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
})
I have now come to the realisation that when using CRA, web crawlers and social media websites can't access the information easily as the content of the page is injected by javascript.
It's too late in this project for me to go back and start with something like nextjs.
A simple solution seems to be create a prerendered version of the website using a headless browser, and serve this version only to crawlers via their user agent.
For this I tried using react-snap, which runs post yarn build of the front end to create static HTML files. While this mostly works (especially from a web crawler perspective) it does seem to break some functionality, as such for human users I still want to serve the SPA bundle created by yarn build and only serve the static HTML version to crawlers.
Implemented by something like this on the backend:
// Sending React Frontend Build
app.use(express.static(`${__dirname}/../frontend/build`))
app.get('/*', (req, res) => {
if (crawlerUserAgents.includes(req.headers['user-agent'])) {
// serve pre-rendered static HTML version of the web app
} else {
// serve normal injected version of the web app
res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
}
})
But the output of react-snap doesn't seem to be able to create an isolated static version of the site in a separate folder within the build folder. So I can't seem to serve one version to humans and one to web crawlers.
Is there a way to serve a static version of the website via Express using react-snap or something similar? I am aware of commerical solutions to this but would prefer something simple via express.
