¿Qué es el JAMstack? Por qué los ecommerce deben conocerlo.

Seguramente te has encontrado alguna vez con el término JAMstack en los últimos dos años. Si estás en un momento de renovación de tu web, debes tener muy en cuenta esta alternativa, pues entre sus bondades está la mejora drástica de la velocidad del sitio, que sabemos que afecta tanto a la experiencia del usuario como a la valoración que Google hace de nuestro sitio. Es la manera perfecta de dar un impulso al crecimiento de tu ecommerce: inmediatez de navegación, velocidad de carga y separación de frontend de backend para mejor organización del trabajo de desarrollo. El uso de microservicios es clave en este tipo de arquitectura, con las ventajas que ello reporta.

JAMstack define un grupo de tecnologías utilizadas conjuntamente para lograr un objetivo, como LAMP y MEAN, por ejemplo.

En el caso de los e-commerce, es una arquitectura que permite, sin perder SEO, ganar flexibilidad en su desarrollo y solucionar los temibles problemas de sobrecarga del servidor, o la lentitud de algunos CMS, sobre todo cuando más se necesita, cuando el tráfico a la web es más denso.

¿Qué significa JAMstack?

JAM son las siglas de JavaScript, API, Markup.

Es una tendencia en la creación de aplicaciones y páginas web que tienen esas características clave:

  • Existe un servidor web (o CDN) «tonto» que envía el HTML necesario para ejecutar la aplicación, normalmente generado mediante un generador de sitios estático. El HTML no se genera
  • La aplicación puede cargar algunos JavaScript que reciben datos de una API. Las interacciones de página como la navegación pueden causar que se obtengan más datos de una API. La autenticación también se realiza a través de una API.

Este nuevo enfoque es una forma nueva de hacer las cosas, en comparación con

  • Sitios web tradicionales en los que el contenido ya está incluido en la aplicación (como en el caso de los sitios estáticos).
  • Sitios web basados en CMS que cargan la información de una base de datos en el backend.
  • Aplicaciones renderizadas por el servidor utilizando cualquier tipo de lenguaje backend.
  • También es diferente a los sitios web renderizados desde el lado del cliente (por ejemplo, construidos con React) con una parte renderizada desde el lado del servidor. El JAMstack no implica en absoluto el renderizado del servidor.

¿Cuáles son las ventajas de usar el JAMstack?

  • Es rápido. El HTML ya está generado y el servidor web sólo debe servirlo, sin involucrar ningún tipo de operación de backend como buscar datos de una base de datos o generar las páginas HTML para cada solicitud. Se puede servir fácilmente a través de una CDN (Content Delivery Network), un servidor compartido, o alternativas gratuitas como Github y netlify.com.
  • Es eficiente. Dado que no hay backend, no hay cuellos de botella en el servidor «principal».
  • Es más barato, ya que servir recursos estáticos es mucho menos costoso que hacerlo a través de un servidor backend.
  • Es más seguro, ya que el backend está expuesto sólo a través de una API.
  • El enfoque tradicional de la aplicación de renderizado de sitios web de forma dinámica, como ocurre con WordPress, Laravel y Rails, está siendo sustituido en muchos casos por un enfoque más ligero.

La rapidez y eficiencia son claves para ofrecer una experiencia de usuario fluida que aumente las conversiones y nuestro ROI, y beneficia al SEO de la página.

Un sitio típico de WordPress puede hacer de 30 a 100 peticiones a una base de datos por cada página cargada, dependiendo de la cantidad de plugins instalados. A menos que esté fuertemente cacheado, puedes reconocer un sitio de WordPress cuando se vuelve popular en Hacker News, Reddit o cualquier otro sitio grande porque obtienes una página en blanco – lo que significa que algo ha fallado en el servidor, ya que el sitio no puede soportar todo ese tráfico. Muchas veces esto es una oportunidad perdida, porque cuando el sitio está en su pico de popularidad, no funciona.

Sirviendo una página HTML estática es muchísimo más eficiente que eso, y los datos dinámicos pueden ser recuperados cuando sea necesario, usando llamadas de API separadas una vez que el HTML es cargado.

¿Para qué se puede utilizar JAMstack?

Muchas aplicaciones pueden caer bajo el paraguas de JAMstack, y las posibilidades son infinitas, desde simples blogs hasta sitios web de comercio electrónico (por ejemplo con Snipcart) y aplicaciones web más complejas.

La nueva versión (en proceso) de este blog se está desarrollando siguiendo las pautas de JAMstack. Todo el HTML se genera en el momento del despliegue, cuando cargas esta página, no hay llamadas a bases de datos ni otros procesos que se interpongan entre el contenido y tú.

Cómo empezar

Una vez entiendes, o decides, que JAMstack es el camino a seguir, te preguntarás, ¿por dónde empezar? Existen cientos de generadores de sitios estáticos en el mercado, y van apareciendo más cada día, ¿cuál es el mejor para empezar?

Un buen lugar para empezar es StaticGen, que contiene una lista de muchos SSGS populares que se pueden organizar y filtrar por idioma, plantilla, licencia y estrellas de GitHub.

¿Cuáles son algunas de las tecnologías que se pueden utilizar para crear aplicaciones JAMstack?

Gatsby
StitchFix, Braun, Figma y Nike han construido sus sitios web utilizando Gatsby (React)

Gridsome
JavaScript. Es muy similar a Gatsby pero con Vue en lugar de React

Jeckyl
Si te gusta desarrollar en Ruby, este es el tuyo

Nuxt
Un framework para Vuejs, que también puede usarse para SSR

Hugo
Si prefieres utilizar Go

© 2019 Pulpo Privacidad| Aviso legal