WR 107: JAMstack para novatos

Jamstack más allá del jamón ¶

Jamstack no es solo una combinación de letras; es un enfoque que rediseña cómo construimos y entregamos sitios web. Atrás quedan los monolitos que generan páginas al vuelo con PHP y bases de datos. Frente a ellos surge un flujo de trabajo en el que HTML, CSS y JavaScript se generan por adelantado, y donde cada pieza cumple un rol claro. Este cambio no es un capricho técnico, sino una forma de lograr sitios más rápidos, seguros y sostenibles.

Del LAMP al Jamstack ¶

Durante años, el stack clásico LAMP (Linux, Apache, MySQL, PHP) dominó la web. Con él resultaba fácil lanzar un blog o una tienda, pero a costa de sacrificar velocidad y simplicidad en producción. Cada petición desencadenaba consultas a la base de datos, procesamientos en el servidor y, a veces, dependencias olvidadas. La alternativa de escribir HTML «a pelo» resolvía la latencia, pero obligaba a duplicar cabeceras, pies de página y fragmentos de código entre archivos.

Jamstack propone volver a las raíces de las páginas estáticas, pero sin perder la potencia dinámica que exige un usuario. Nada de monolitos que lo controlan todo; en su lugar:

• Preconstruir cada página en el momento de despliegue.
• Separar la presentación (HTML/CSS) del contenido (Markdown o APIs).
• Enriquecer la interfaz con JavaScript en el cliente.

Así se convierte un sitio simple en un ecosistema ágil, donde cada problema se aborda con la herramienta más adecuada.

Los tres pilares ¶

“La J es de JavaScript, la A es de API y la M es de Markup o Markdown.” Esta definición no es un eslogan vacío, sino la clave de un stack modular:

JavaScript como motor de dinamismo ¶

JavaScript sigue siendo imprescindible. En el navegador:

• Detecta interacciones;
• Actualiza contenidos sin recargar la página;
• Gestiona animaciones y rutas en Single Page Applications.

La J de Jamstack no impone un framework: puede ser vanilla, React, Vue o la biblioteca que elijas. Basta con que tu interfaz funcione completamente en el cliente.

APIs que exportan contenido ¶

En lugar de aferrarse a la base de datos de un CMS, los datos llegan a través de servicios REST o GraphQL. Cualquier API se convierte en una fuente:

• Un headless CMS que ofrece un panel de edición y expone JSON;
• WordPress o Drupal como backend sin frontend;
• Plataformas externas que proveen comentarios, búsquedas o formularios.

Este desacoplamiento obliga a pensar en cada función como un microservicio, capaz de evolucionar por separado.

Markup para separar responsabilidades ¶

Usar Markdown o archivos de texto plano encierra el contenido de un modo legible y versionable. Esa materia prima se inyecta en plantillas que definen la estructura global:

• Cabeceras, pies de página y menús en un mismo archivo de plantilla.
• Variables globales (título del sitio, redes sociales) configuradas en un único lugar.
• Archivos Markdown con metadatos (fecha, categorías) y cuerpo del texto.

El resultado: un proceso de build que fusiona contenido y diseño en artefactos estáticos listos para servir.

Recuperar funcionalidades con microservicios ¶

Un sitio estático no lo cubre todo de serie. Comentarios, formularios, buscadores y registro de usuarios desaparecen al prescindir de un monolito. Pero no hacen falta grandes infraestructuras; basta con integrar servicios especializados:

• Comentarios: Disqus, Discourse o un pequeño backend propio.
• Formularios de contacto: Netlify Forms, Formspree o un script personalizado que envíe correos via SMTP.
• Buscador: Algolia, Elasticlunr o Lunr.js en el cliente.
• Autenticación y registro: Auth0, Firebase Auth o un microservicio Node que valide tokens.

Cada pieza se conecta mediante una llamada a la API adecuada, sin bloquear el flujo global de la página.

Desplegar sin complicaciones ¶

El despliegue tradicional por FTP o SSH se sustituye por servicios que automatizan la build y distribución sobre CDNs:

• GitHub Pages y GitLab Pages: repositorio Git como origen y hosting gratuito con HTTPS.
• Netlify: build automática al hacer push, dominio propio y funciones serverless integradas.
• Vercel (antes Zeit): despliegue de proyectos React/Next.js con prerender y cache global.
• Stackbit: orquesta generadores, CMS y hosting en un flujo visual.

Un simple git push dispara la generación del sitio, la invalidación de caché y la publicación en todo el mundo en segundos.

Ventajas de un enfoque estático ¶

Adoptar Jamstack supone una inversión inicial de aprendizaje, pero el retorno se nota en cada visita:

• Mayor velocidad: contenido servido desde CDN, sin tiempos de espera por consultas o procesados.
• Seguridad reforzada: el servidor no ejecuta código al recibir cada petición, se eliminan vectores de ataque.
• Escalabilidad instantánea: miles de usuarios acceden simultáneamente sin saturar bases de datos.
• Sostenibilidad: menos recursos en cada request reducen consumo energético y huella de carbono.
• Control de versiones total: contenido, plantillas y configuraciones conviven en Git.

Un sitio Jamstack alcanza puntuaciones de oro en auditorías de rendimiento y accesibilidad, acercándose a los límites de lo posible en la web.

Complejidad y especialización ¶

La riqueza de Jamstack nace de su modularidad. Sin embargo, conviene reconocer que:

• Requiere conocer varias herramientas y flujos de trabajo.
• Implica confiar en terceros para funcionalidades básicas.
• Demanda configuraciones adicionales (cache invalidation, tokens, dominios).

Lejos de ser un obstáculo, esta complejidad abre un camino de especialización. Un desarrollador puede centrarse en optimizar APIs, otro en maquetación y otro en pipelines de despliegue. Cada uno aporta valor donde antes un único CMS lo resolvía de forma genérica.

Un caso de estudio real ¶

Smashing Magazine, referente en frontend, enfrentó un ecosistema fragmentado: WordPress, Ruby on Rails y Shopify. Cada sección del portal vivía en un stack distinto. Para unificar:

• Eligieron Hugo, un generador en Go, por su velocidad.
• Mantuvieron la edición en CMS headless para contenido y membresías.
• Simplificaron la infraestructura en un solo repositorio Git y un despliegue automatizado.

El resultado: un portal más rápido, seguro y fácil de mantener. La transición demostró que Jamstack escala con proyectos de gran envergadura, no solo blogs personales.

Tu próximo blog debería ser Jamstack ¶

Si estás cansado de plugins que actualizas sin descanso, de migraciones dolorosas o de límites encubiertos en plataformas de terceros, considera este cambio. Extraer tu contenido de Medium o de CMS tradicionales puede parecer un salto, pero:

• El control total te devuelve la propiedad de tu trabajo.
• Los costes recurrentes de hosting desaparecen (o se reducen drásticamente).
• Tu audiencia accederá a un sitio más rápido y receptivo.

Como decía mi abuela, “hoy tenemos mucha plancha y vamos a hablar de un concepto nuevo que se llama JAM STACK y suena jamón.” Quizá la analogía sea divertida, pero la propuesta es seria: un stack modular, veloz y centrado en el usuario.

Atrévete a probarlo, explora generadores como Jekyll, Gatsby o Hugo, juega con headless CMS como Strapi o Contentful, y despliega en Netlify o GitHub Pages. Más que una moda, Jamstack es una pista para reinventar la web, pieza a pieza, con la ligereza del markup y la potencia de las APIs.

Javascript, API y Markdown. Con esa combinación, ¿qué puede salir mal?

Para empezar, dos palabras mágicas: Curso Gratis.

Episodio Especial 111 ¶

El episodio 111 está al caer y quiero contar con vosotros.

Me gustaría saber ¿Por qué te gusta programar?

Más sencillo, imposible.

Puedes enviarme un audio por telegram o gracias a este formulario directo.

¿Qué es JAMstack? ¶

Es un stack o pila de tecnologías que se basa en JavaScript, API y Markup.

• JavaScript para dotar de poderes reactivos a cualquier web.

• API para conectar los sistemas de ese nuevo desarrollo, tanto internos como externos.

• Markup o Markdown para definir un formato de contenidos sencillo.

Dicho de otra manera:

Construir sitios web como antaño (HTML, CSS y JS) pero con metodologías de desarrollo modernas.

Realmente hay más piezas que desgranamos en el episodio.

Generadores de sitios estáticos ¶

Sin duda es la pieza más interesante de todas, por lo que aporta de novedad y por la intensidad de los cambios que sufren.

A través de estos sistemas se generan todos los estáticos necesarios. Un ‘render’ completo en base a los contenidos creados en ficheros markdown y los que captures a través de una API. Antes habrás elegido una plantilla, tal vez modificado la misma, y el resultado final es esa web “a la vieja usanza”.

Hemos hablado ya de los sitios estáticos en el episodio 46 y de Gatsby (uno de ellos) en el episodio 20.

Ventajas e inconvenientes ¶

Algunas están muy relacionadas con los nuevos sistemas de desarrollo.

Rapidez.

La carga de la página es más rápido, el despliegue tambien. Todo gana en velocidad excepto la primera vez que te pones con ello. Claro, aprender una nueva tecnología tiene su tiempo.

Seguro.

Se acaba lo de tener una web tan vulnerable como cuando usas populares CMS. Nada está exento de riesgo pero, al menos, ‘wp-admin’ ya no significará un problema.

Separación de responsabilidades.

El frontend se separa del backend. Incluso cada uno de ellos puede estar dividido en más partes para gestionar más servicios. Esto implica gestionar el stack de forma muy diferente, es más complejo y requiere nuevos conocimientos.

Escalable.

Cualquier nueva función implica tener el conocimiento de incorporarla. Esto tiene una parte buena: podemos gestionar todo a medida que vayamos creciendo. El inconveniente es el mismo, con un CMS cosas como los comentarios, buscador o persistencia viene ya de serie.

Centrados en lo que importa.

Cuando gestionas monolitos gran parte del trabajo consiste en “quitar” o en “modificar” comportamientos. Aquí “sólo” tenemos que añadir nuevas funciones. Es una gran responsabilidad, pero el valor que aporta tu trabajo (y la satisfacción) es mucho mayor.

Todos los enlaces aquí ¶

La lista de las cosas mencionadas, en esta recopilación:

• JAMstack oficial (recursos)
• Awesome JAMstack (los enlaces que no encuentres, están todos aquí)
• JAMstack WTF!
• StaticGen (todos los generadores en una sola lista)
• Rendering the web
• Rise of the JAMstack (vídeo donde explican, entre otras cosas, el caso de SmashingMagazine)
• Netlify Products
• Gitlab Pages
• HeadlessCMS
• Fenómeno Mutante: Migración a Hugo en directo.
• JAMStack es el futuro de la web
• StackBit

¡Nos escuchamos el próximo martes!