Construí un sitio web dinámico en node.js (backend) / React (frontend) SSR - sin next - from scratch - Class Based Components / express.js.
Necesito una solución para que todos los enlaces dinámicos muestren información de vista previa con una imagen cuando pegamos un enlace en WhatsApp, Telegram, Facebook, etc. (etiqueta meta og: todo ya configurado).
Para verificar si la vista previa funciona, estoy usando las siguientes herramientas:
Y el sitio web que estoy tratando de configurar es: https://fullstackwebdesigner.com/
Ya probé soluciones con react-helmet y react-helmet-async. react-helmet-async, probé muchas configuraciones con HelmetProvider, pero no pude encontrar una buena fuente de información sobre qué componentes basados en clases necesito ajustar.
Investigué sobre el desbordamiento de pila y encontré algo que puede resolver mi problema, en este enlace:
Aplicación Prerender Angular en un servidor Node.js ya existente
Sugiere una dependencia llamada prerender-node. El problema es que necesito un plan de suscripción para usarlo. Para este proyecto, puede estar bien, porque no tendré tantos hits diarios y hay un plan de suscripción gratuito para menos de 1000 renders por día. Pero para otros proyectos más grandes, puede que no sea sostenible ya que mis clientes tendrían que pagar una cierta cantidad de vistas previas mensualmente. Y otras publicaciones de desbordamiento de pila sugieren usar Next framework, pero eso estaría fuera de discusión, ya que el proyecto se está ejecutando completamente y tiene demasiados componentes para migrar.
Entonces, ¿alguien tiene alguna otra sugerencia que no necesite una suscripción y, además, no migre todo mi proyecto a Next framework (que, por cierto, me gusta)? ¿O hay alguna configuración especial que deba hacer en el servidor para pre-renderizar? Está alojado en un servidor de Windows (IIS).
Algunas de las dependencias clave que estoy usando:
"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"Otra información importante que mencionar es que mi aplicación recupera información sobre el método del ciclo de vida del componenteDidMount. Y renderiza las metaetiquetas usando casco.