Jamstack: definición, beneficios y mejores prácticas para modernizar arquitecturas web

¿Qué es el Jamstack?

Comencemos por diseccionar y definir el término. Stack corresponde a una pila de herramientas tecnológicas que se utilizan juntas para formar un ecosistema coherente y comunicativo, con el fin de construir una aplicación. Como ejemplo, puedo citar algunas pilas populares como MEAN y MERN.

JAM es un acrónimo, que significa:

J me gusta JavaScriptel lenguaje de programación dinámico y poderoso que se usa en todas partes y que tiene cientos de marcos,
A para APIa saber, el back-end, el motor que impulsa todo,
M como marcadoel HTML, que se verá en el navegador.

Una aplicación Jamstack utiliza estas diferentes herramientas, siguiendo un conjunto de características y prácticas, tales como:

El desacoplamiento, es decir la separación entre el frente y el reverso. Por lo general, el frente se construye utilizando un generador de sitio estático. El back-end se integra con el front mediante las API llamadas durante la fase de compilación. Por lo tanto, encontramos aquí el equivalente de J y A. Pre-renderizado, correspondiente a las páginas JavaScript de un sitio Jamstack, presentadas con archivos Markup construidos y generados de antemano, a diferencia de una aplicación web clásica, donde las páginas se construyen en sus formatos Markup bajo demanda. , cada vez que el usuario ve la página. Encontramos en esta noción la M del Jamstack.

¿Cuál es el propósito del Jamstack?

La evolución del desarrollo web no ha sido fácil. Al principio, todo era simple. Los primeros sitios web construidos eran solo una carpeta con archivos HTML accesibles por el navegador. Solo el HTML controlaba lo que se debía servir al usuario.

El primer cambio apareció en la forma de gestionar los contenidos. El usuario podía acceder a contenidos personalizados y dinámicos, que se construían bajo demanda a través de un servidor consultando una base de datos. Surgió entonces un gran problema, ya que para captar este contenido dinámico y servirlo al usuario se necesitaban más recursos, lo que condujo a un empobrecimiento del rendimiento, muy por debajo del de las páginas simples HTML estático. El dilema es mantener el rendimiento sin precedentes del marcado clásico (no solo desde el punto de vista del usuario, sino también desde el punto de vista de los rastreadores), conservando al mismo tiempo la posibilidad de proporcionar contenido dinámico y una experiencia interactiva.

Aquí es donde Jamstack vino al rescate, con una arquitectura y herramientas diseñadas para conciliar estos requisitos. En resumen, Jamstack le permite entregar un sitio web estático, al tiempo que proporciona contenido dinámico, para ofrecer una experiencia de usuario interactiva y moderna.

¿Cuáles son las ventajas del Jamstack?

Las ventajas del Jamstack son numerosas. Encontramos en particular:

Rendimiento ideal con carga rápida de páginas, lo que impacta positivamente en la experiencia del usuario, el SEO y la conversión, Mayor seguridad y mantenimiento más fácil gracias al desacoplamiento y la posibilidad de usar un alojamiento simple o un CDN, La portabilidad de los sitios Jamstack pregenerados que permiten un gran conjunto de hosts para atenderlos sin complejidad de configuración, mejor experiencia de desarrollador.

¿Para qué tipos de sitios es adecuado Jamstack?

El Jamstack es adecuado en muchos sentidos para todo tipo de aplicaciones. Sin embargo, hay casos donde el Jamstack trae soluciones reales y otros casos donde su uso trae más complejidad que soluciones. El rendimiento, el SEO y la experiencia del usuario son los puntos más importantes a tener en cuenta cuando se quiere explotar al máximo el potencial del Jamstack.

Caso n°1: desarrollo de un sitio web de comercio electrónico

Mis principales problemas son:

¿Cómo hago para que mi sitio aparezca en la parte superior de las clasificaciones de los motores de búsqueda para atraer nuevos clientes? ¿Cómo gestionar un gran flujo de clientes y conexiones simultáneas, manteniendo un buen rendimiento? ¿Cómo puedo brindarles a mis clientes una muy buena experiencia de usuario para aumentar mi tasa de conversión? ¿Cómo hago que mi sitio sea flexible a los cambios, en términos de contenido y funcionalidad?

Buenas noticias: el Jamstack está diseñado para abordar precisamente estas diferentes preocupaciones. En primer lugar, gracias al prerenderizado en sus 2 modos SSR (Server-Side Rendering) y SSG (Static Site Generation), que pueden pregenerar un marcado listo para usar y bien gestionado por los rastreadores. Luego, el uso de modernas tecnologías y marcos de JavaScript permitirá que su sitio de comercio electrónico combine rendimiento, SEO y UX sin hacer ninguna concesión.

Para la gestión de contenidos, puedes utilizar una herramienta revolucionaria: el CMS sin cabeza. Lo que definimos por “cabeza” en este caso es la capa de presentación (lo que ve el usuario). Un “CMS sin cabeza” separa la cabeza del cuerpo, es decir, el contenido y su gestión. Gracias a esta separación, obtienes un conjunto de ventajas: más flexibilidad, la posibilidad de abrir tu back-end a varias plataformas a través de la API (móvil, web, escritorio, etc.), más seguridad y una mejor experiencia de desarrollador.

Por lo tanto, Jamstack es una buena opción para un sitio de comercio electrónico o para un sitio sujeto a los mismos requisitos de rendimiento, SEO (clasificación, visibilidad, intercambio social) y UX con páginas de destino, blogs y herramientas SaaS.

Caso n°2: desarrollar un portal de clientes o un back office interno

En este caso, la experiencia del usuario es la máxima prioridad y el SEO no importa. Aquí, el Jamstack estaría sobredimensionado e implicaría recurrir a funciones y prácticas innecesarias.

Caso n°3: desarrollo de una red social

Una red social tiene un contenido muy dinámico con un volumen muy grande de páginas para generar. Aquí, el uso de la generación estática es contraproducente y ralentizará las actualizaciones. Pero el Jamstack sigue siendo posible en este tipo de proyectos, siempre que se utilice con cuidado y conocimiento. De hecho, la adopción de estrategias de generación adecuadas, como SSG (Static Site Generation) o incluso ISR (Incremental Static Rendering), puede resolver los problemas de eficiencia de SEO.

¿Cómo beneficia la implementación de una arquitectura Jamstack a los equipos de tecnología de una empresa?

Como se mencionó anteriormente, una de las principales ventajas de Jamstack es la mejora de la experiencia del desarrollador:

en la parte delanteracon el uso de marcos web Javascript ya populares como React: sin obstáculos ni limitaciones, el equipo de desarrollo puede mantener completamente su stack técnico y adaptarlo al Jamstack, mientras gana recursos, flexibilidad y experiencia.
En el nivel de fondocon acceso a herramientas como headless CMS o la reutilización de APIs que permiten acelerar el desarrollo: esta arquitectura desbloquea todo el potencial de industrialización, que el uso de CMS tradicionales no permite.

La arquitectura Jamstack representa aquí un potencial de ahorro de tiempo real para los equipos técnicos y, por lo tanto, conduce a una reducción de los costes de desarrollo.

¿Cómo te permite el Jamstack liberarte del uso de CMS?

El Jamstack no reemplaza sistemáticamente al CMS. Sin embargo, en los casos en que se puede, muchas ventajas son clave para el proyecto:

El Jamstack puede ofrecer la mayor parte de lo que puede ofrecer un CMS clásico, y cuando su uso es posible y consistente, es mucho más eficiente que un CMS, La posibilidad de incluir otras plataformas (aplicación móvil, escritorio, IoT, otros microservicios, etc.) gracias al desacoplamiento: el anverso y el reverso ya no se encuentran en una arquitectura monolítica totalmente vinculada, ahora se comunican a través de la API, Una mejor experiencia de desarrollador, Seguridad incomparable, industrialización gracias a la posibilidad y facilidad de control de versiones hasta implementación continua: ya no tenemos la restricción de las actualizaciones periódicas de complementos, ya no estamos obligados a realizar acciones manuales de duplicación y entrega para cada actualización personalizada, lo que permite un control total sobre todo el proyecto y automatiza todo en un enfoque de CI/CD.

Tenga en cuenta que muchos CMS clásicos (como WordPress) ya ofrecen la posibilidad de API. Esta característica por definición incluye estos CMS en su nueva versión headless en el Jamstack.

¿Cuáles son las mejores prácticas para implementar el Jamstack?

Para aprovechar al máximo el Jamstack, hay algunos consejos que debe conocer, como:

Utilice una CDN (red de entrega de contenido). Configure un sistema de invalidación de caché para cada implementación: si es óptimo, esta invalidación debe ser instantánea. Configure la implementación atómica: sabiendo que un sitio Jamstack puede aumentar de tamaño muy rápidamente debido a los archivos de marcado generados, un nuevo cambio puede requerir la redistribución de cientos de archivos. Si se hace uno por uno, se puede crear un estado de inconsistencia mientras no se termine el proceso. Esto debe evitarse mediante prácticas que permitan no poner los cambios en producción (accesible en línea) hasta que todos los archivos se hayan implementado. Este sistema atómico lo ofrecen hoy las plataformas modernas. Un requisito previo para esto es administrar todo en un sistema de control de versiones como GIT y adoptar la automatización de compilación e implementación. Usa servicios SaaS: no es necesario desarrollar todo para el back-end. Muchos servicios están disponibles y se pueden utilizar a través de sus API (gestión de contenido, autenticación, sistema de correo, sistema de gestión de formularios, etc.).

¿Consejos para que tu proyecto Jamstack tenga un buen comienzo?

Para J, llamo React.js, que es un marco de JavaScript.

Para la A, uso Strapi, el CMS headless de código abierto más popular y 100% JavaScript.

Para la M, utilizo Next.js, que es hoy en día el generador de sitios más popular y uno de los más exitosos, porque admite no solo SSG (Static Site Generation), sino también SSR (Server -Side Rendering) y especialmente ISR (Representación Estática Incremental).

Para el alojamiento front-end, Firebase, Versel y Netlify son buenas opciones.

Y para colmo, un buen CI/CD gestionado por Gitlab CI.

© Vercel

Si en la práctica el Jamstack no revoluciona el desarrollo web, te permite armarte con lo mejor de cada uno de los componentes para convertirlo en un todo potente y óptimo, que sabe afrontar los retos actuales del desarrollo web.

Botón volver arriba