I’m built a dynamic website in node.js (backend) / React (frontend) SSR - without next – from scratch - Class Based Components / express.js.
I need a solution for all the dynamic links to display preview info with image when we paste a link on WhatsApp, Telegram, Facebook and so on (og meta tag – all configured already).
To check if the preview works, I’m using the following tools:
And the website I’m trying to configure for it is: https://fullstackwebdesigner.com/
I’ve already tried solutions with react-helmet and react-helmet-async. react-helmet-async, I tried many setups with the HelmetProvider, but couldn’t find a good source of information on which class based components I need to wrap.
I researched on stack overflow and found something that may solve my problem, on this link:
Prerender Angular app on an already existing Node.js server
It suggests a dependency called prerender-node. Problem is that I need a subscription plan in order to use it. For this project, may be ok, because I won’t have so many daily hits and there’s a free subscription plan for under 1000 renders a day. But for other bigger projects, it may not be sustainable as my clients would need to pay for a certain quantity of previews on a monthly basis. And other stack overflow’s posts suggest using Next framework, but that would be out of the question, as the project is fully running and has too many components in order to migrate.
So, anyone has any other suggestion that wouldn’t need a subscription and also, not migrate my whole project to Next framework (which I like, by the way)? Or is there any special configuration I might need to do on the server in order to pre-render? It’s hosted on a windows server (IIS).
Some of the key dependencies I’m using:
"express": "^4.17.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-helmet-async": "^1.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2"
Another important info to mention is that my application retrieves information on componentDidMount lifecycle method. And it renders the meta tags using helmet.