JAMstack es una arquitectura para construir webs y aplicaciones que separa el frontend del backend en tiempo de construcción. Las siglas significan JavaScript, APIs y Markup — los tres bloques sobre los que se apoya.

---

¿Para qué sirve?

El problema clásico de una web tradicional: el servidor recibe cada petición, consulta la base de datos, genera el HTML y lo envía. Cada visita es un ciclo completo. Lento, costoso y con muchos puntos de fallo.

JAMstack invierte el modelo:

• El HTML se genera en tiempo de build, no en cada petición
• Los archivos resultantes se sirven desde una CDN (sin servidor)
• La lógica dinámica se delega a APIs externas o serverless functions

El resultado: la página llega al usuario desde el servidor más cercano del mundo, en milisegundos, sin base de datos expuesta ni servidor que pueda caerse bajo carga.

---

Las tres letras

J — JavaScript

Toda la interactividad dinámica ocurre en el cliente. Puede ser React, Vue, Svelte, Alpine.js o vanilla JS. El framework da igual; lo importante es que la lógica dinámica no bloquea la entrega inicial del HTML.

A — APIs

Las operaciones que necesitan servidor (autenticación, pagos, datos en tiempo real, formularios) se externalizan a APIs. Pueden ser servicios de terceros (Stripe, Auth0, SendGrid) o funciones serverless propias desplegadas en Netlify, Vercel o Cloudflare.

M — Markup

El HTML se genera en el momento del build usando un generador de sitios estáticos. El resultado son archivos .html listos para servir. Sin PHP, sin plantillas que renderizar en cada petición.

---

Ejemplo básico

Un sitio JAMstack típico se construye así:

# 1. El generador de sitios lee el contenido (Markdown, CMS, APIs)
# 2. Genera todos los archivos HTML estáticos
# 3. El resultado se sube a una CDN

npm run build
# → dist/
#     index.html
#     about/index.html
#     blog/mi-primer-post/index.html
#     ...

Para un formulario de contacto — que necesita servidor — se delega a una API:

// No hay backend propio: se llama a una función serverless
async function enviarFormulario(datos) {
  const respuesta = await fetch('/api/contacto', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(datos),
  });
  return respuesta.json();
}

La función /api/contacto vive en Vercel, Netlify o similar — en la nube, no en tu servidor.

---

Generadores de sitios JAMstack populares

Herramienta	Lenguaje / Framework
Astro	Agnóstico (React, Vue, Svelte…)
Next.js	React
Nuxt	Vue
Gatsby	React
Hugo	Go (sin JS, muy rápido)
Eleventy	JavaScript puro

---

JAMstack vs arquitectura tradicional

	Tradicional	JAMstack
Renderizado	En cada petición	En tiempo de build
Servidor	Siempre activo	Innecesario para el HTML
Escalado	Complejo	Automático (CDN)
Seguridad	Mayor superficie	Reducida (no hay DB expuesta)
Velocidad	Depende del servidor	Consistentemente rápida

---

Conceptos relacionados

CDN SSR CSR Serverless API

---

Conclusión

JAMstack no es un framework ni una herramienta — es una forma de pensar la arquitectura web. Al separar la presentación (HTML estático en CDN) de la lógica (APIs y funciones serverless), se obtienen sitios más rápidos, más seguros y más baratos de operar. Es la base sobre la que funcionan herramientas como Astro, Next.js o Netlify.

---