Gatsby para el marketing de sitios web

En el marketing de sitios web, el objetivo principal es atraer a los usuarios y obtener clientes potenciales o conversiones. Para conseguir una buena cantidad de tráfico y un buen posicionamiento, el contenido y las estrategias de SEO son cruciales. En el proceso de creación de estos sitios web suelen intervenir dos tipos de profesionales muy diferentes: Los especialistas en SEO y los desarrolladores web. Por un lado, el equipo de SEO trabaja en la definición de los contenidos, las palabras clave, los micro formatos y otros, mientras que el equipo de desarrollo trabaja en la implementación técnica. 

El enfoque más sencillo para crear este tipo de proyectos es trabajar con un CMS como WordPress, ya que la interfaz es fácil de usar para los especialistas en SEO y hay cierto margen para la personalización del diseño. Sin embargo, esta puede ser una solución limitada para los sitios web que necesitan funcionalidades personalizadas, diseño a medida y más control sobre la aplicación. En estos casos, los sitios web deben ser desarrollados completamente por un equipo de TI. El reto de este enfoque, si se utiliza cualquier tecnología, es que cada vez que el equipo de SEO necesita cambiar algún contenido, el equipo de desarrollo tendría que estar involucrado y los cambios tardan más en salir a la luz. 

Aquí es donde entran en juego los frameworks como Gatsby. Ofrecen a los desarrolladores un control total sobre el código y, al mismo tiempo, permiten a los especialistas en SEO trabajar con un CMS de su elección.

¿Qué es Gatsby?

Gatsby es un generador de sitios estáticos (SSG por sus siglas en inglés) de código abierto que utiliza React para el desarrollo, Webpack para la agrupación y GraphQL para la obtención de datos del CMS. 

Gatsby te permite obtener datos de varios recursos, como WordPress, Contentful, DatoCMS, y muchos más. Consultar con GraphQL significa que puedes crear peticiones personalizadas de forma declarativa, y también te ofrece una interfaz completa para crear, probar tus consultas y previsualizar los resultados.

Dado que Gatsby está basado en React, es posible trabajar en él como en cualquier otra aplicación React, con componentes, ganchos, librerías de estilo, etc., dando a los desarrolladores un control total sobre el diseño y el comportamiento. Puedes crear tu propio sistema de diseño y hacer uso de él en tu sitio web de Gatsby. 

Como SSG, convierte todo el código en archivos estáticos y éstos sólo tienen que ser devueltos desde el servidor cuando el usuario los solicita. Esto tiene muchas ventajas:

• Muy buen rendimiento ya que el sitio web se construye como archivos estáticos y las peticiones ya se han hecho antes de servir. 
• Más seguridad porque no hay referencias a bases de datos. 
• Alta escalabilidad ya que los archivos basados en HTML consumen muy poco en los servidores.
• Mejor puntuación SEO, ya que las páginas no se generan dinámicamente y el rastreo puede realizarse con datos completos. 

Ecosistema de plugins Gatsby 

Gatsby tiene una gran comunidad que ofrece muchos starters y plugins. Estos son algunos ejemplos útiles:

• Gatsby-plugin-sharp. Este plugin expone funciones de procesamiento de imágenes para configurar la capacidad de respuesta, las dimensiones y la calidad de las imágenes. La carga de imágenes es crítica para el rendimiento y el SEO, por lo que reducir las dimensiones de las imágenes puede ayudar mucho. Las imágenes de resolución completa pueden cargarse en el CMS y los desarrolladores pueden elegir recortarlas en función del caso de uso.
• Gatsby-plugin-sitemap. Este plugin le ayuda a configurar el mapa del sitio web con fines de SEO.
• Gatsby-plugin-google-tagmanager. Este plugin añade el Google Tag Manager a su sitio.
• Gatsby-plugin-google-amp. Este plugin formatea las páginas AMP.

¿Qué es lo que no es tan bueno de Gatsby?

• GGatsby utiliza Webpack para el bundling pero si necesitas añadir configuración encima, necesitas utilizar su archivo gatsby.config.js.Para configuraciones muy específicas o para depurar el proceso de bundling, puede ser más complicado.
• Hay dos modos de compilación:: gatsby develop ejecuta un servidor en segundo plano con recargas en vivo mientras que gatsby build crea todos los archivos estáticos como en el modo de producción. Durante gatsby develop hay algunos pasos de producción que se saltan, por lo tanto, cuando las aplicaciones están listas para ir en vivo, pueden surgir algunos problemas al realizar la fase de construcción. Para evitar esto y bloquear los despliegues, es aconsejable encontrar los problemas de construcción tan pronto como sea posible y ejecutar gatsby build a través de la automatización.
• Los sitios web Gatsby son rápidos a costa de tener tiempos de construcción grandes y que consumen recursos. Esto es especialmente cierto cuando el sitio web tiene un gran número de páginas. Sin embargo, Gatsby ha mejorado esto y con la Generación Estática Diferida (DSG) las páginas pueden ser configuradas para ser construidas en tiempo de ejecución. Una página con una gran cantidad de posts puede configurar sus posts más antiguos para usar este modo de construcción para reducir los tiempos de construcción. 
• Los cambios en el contenido no implican cambios en el código, pero sí necesitan un despliegue para volver a construir la aplicación con los nuevos datos. 
• El ecosistema de plugins es muy útil, pero si quieres tener un control total sobre las funcionalidades puede que tengas que desarrollarlas tú mismo.

¿Cuáles son las alternativas?

 Hugo 

• Es otro SSG que se construye en Go. 
• No está diseñado específicamente para la gestión de contenidos a través de CMS, aunque es posible trabajar con ellos. El contenido debe estar escrito en HTML o markdown y existen herramientas que transforman los datos del CMS a formatos compatibles con Hugo.
• El estilo tiene que ser escrito como un nuevo tema. Esto significa que tiene que ser estructurado en archivos HTML, parciales y css. 
• Tiene tiempos de construcción más bajos que Gatsby. 

NextJS

• Es un marco de trabajo javascript que puede trabajar de forma híbrida con el renderizado estático y del lado del servidor.
• Cuenta con optimizaciones de SEO para imágenes, agrupación inteligente, precarga de rutas, routing internacionalizado y otros. 
• Es agnóstico en cuanto al método de obtención de datos, no está restringido al uso de GraphQL mientras que Gatsby sí lo está. 
• Utiliza la Regeneración Estática Incremental (ISR) que consiste en poder decidir qué páginas se construyen antes del despliegue y cuáles se construyen después del despliegue a petición del usuario. El problema de este método de renderización es que podría haber inconsistencias en los datos, ya que algunas páginas se construirían con los últimos datos disponibles y otras mostrarían datos desactualizados. 

Conclusiones 

Hay muchas tecnologías para crear sitios web de marketing: Hugo, Next y Gatsby, entre otras. Si te gusta Go como lenguaje de programación y los tiempos de construcción son más importantes que la gestión de contenidos a través de un CMS, Hugo es una buena opción para ti. 

Si estás más familiarizado con React, puedes elegir entre Next o Gatsby. Next te dará el control total de las bibliotecas y los métodos de obtención de datos, mientras que Gatsby será más fácil de conectar a un CMS y ofrecerá más plugins listos para usar.