I'm working on a project made on Vite, now there is this Product card and when I click on it, it redirects to a Product Detail component where an API is hit to fetch the data of that product, and I'm getting the id from url params.

Now i have this requirement that when the product detail page is shared on whatsapp, the image incoming from the api data should be displayed as a preview image.

I'm also using react-helmet async, and providing the image url to it but it is not working as whatsapp crawlers dont execute javascript.

Can I somehow pre-render the html in vite with the image incoming from API data? something like SSR or SSG? At this point, it's too late to switch to Next js or some other framework. I just want to send the image along with the page url in whatsapp, tried sending separate image as a single message as well but that didnt work as well.

Please help me as I want to get it done with this project, this is currently the last concern. Thank you