¿Qué es el headless commerce (comercio headless)?

Headless significa «sin cabeza», y la cabeza es la parte que ve el comprador: la web, con su diseño y sus páginas. En una tienda headless esa parte se construye aparte, a medida, y la plataforma de comercio se queda con lo de dentro. No hay que confundirlo con un navegador headless, el que se usa sin ventana para hacer pruebas o rastrear páginas. Te importa por una razón que no suele salir en la propuesta: todo lo que la plantilla de la plataforma hacía en cada página pasa a ser responsabilidad de quien construye el frontend, y eso incluye lo que leen los buscadores y los asistentes de IA.

Cómo funciona

Una tienda headless tiene dos piezas que se hablan por API.

El backend de comercio guarda el catálogo y hace el trabajo de tienda: el carrito, el checkout, los pagos y los pedidos. BigCommerce lo explica con su propio esquema: el storefront es la capa donde quien compra interactúa con los productos, y puede ser un CMS, una app móvil, un quiosco o un sitio estático; una aplicación hace llamadas a las API de BigCommerce, y BigCommerce crea el pedido y procesa el pago, así que esa infraestructura no hay que construirla.⁠^{[1]BigCommerce Docs. Introduction to Headless Commerce}

El frontend es la aplicación que pide los datos y pinta las páginas. Shopify resume la idea como toda la potencia de Shopify por debajo y control completo sobre el frontend, y ofrece dos caminos: Hydrogen, su framework oficial para comercio headless, con alojamiento en Oxygen, o cualquier otro lenguaje y framework conectado a sus API con el canal Headless.⁠^{[2]Shopify (shopify.dev). Build headless commerce} La pieza central es la Storefront API, que permite ver productos y colecciones, añadirlos al carrito y pagar desde cualquier plataforma: la web, una app o un juego.⁠^{[3]Shopify (shopify.dev). Storefront API reference} BigCommerce ofrece sus propias API y SDK para el mismo fin.⁠^{[1]BigCommerce Docs. Introduction to Headless Commerce}

La diferencia con una tienda normal está en quién genera el HTML. En una tienda con plantilla, la plataforma lo genera con su sistema de temas, Liquid en Shopify o Stencil en BigCommerce, y lo que una aplicación añade a esa plantilla aparece en todas las fichas. En una tienda headless, esa plantilla no se usa: lo que una aplicación inyectaba en el tema no llega a un frontend que no carga el tema.

Lo que cambia para buscadores y asistentes

El renderizado. Google procesa JavaScript en tres fases, rastreo, renderizado e indexación, y renderiza las páginas con una versión actual de Chromium. Aun así recomienda el renderizado del lado del servidor o el prerenderizado, porque hace la web más rápida para usuarios y rastreadores, y no todos los bots pueden ejecutar JavaScript.⁠^{[4]Google Search Central. Understand JavaScript SEO basics} Un frontend que pinta la ficha en el navegador le enseña a un rastreador que no ejecuta JavaScript una página casi vacía. Hydrogen, por ejemplo, se apoya en React Router con renderizado en el servidor.⁠^{[2]Shopify (shopify.dev). Build headless commerce}

Las etiquetas de la página. El título, la meta description y la etiqueta canonical se pueden poner con JavaScript, aunque para la canonical Google prefiere el HTML y pide que JavaScript nunca la cambie a un valor distinto del que trae el HTML original.⁠^{[4]Google Search Central. Understand JavaScript SEO basics} Pero alguien tiene que escribir ese código: la plataforma guarda los campos de SEO de cada producto, y es el frontend el que decide si los lee y los pone en la página.

Los archivos del sitio. El robots.txt y el sitemap XML también pasan al frontend. La plantilla de inicio de Hydrogen, por ejemplo, crea rutas propias para /robots.txt y /sitemap.xml.⁠^{[5]Shopify (shopify.dev). Getting started with Hydrogen and Oxygen}

Los canales de IA. Shopify Catalog, la base de datos con la que Shopify reparte productos entre los canales de IA, acepta productos publicados en la tienda online o en los canales Hydrogen o Headless; si usas Hydrogen o Headless, las rutas tienen que seguir el formato correcto para que el producto entre, y tiene que publicarse con una URL de producto identificable.⁠^{[6]Shopify Help Center. Requirements for being included in Shopify Catalog}

En una tienda

Ejemplo ficticio. Quién hace cada cosa en la misma ficha de producto, con plantilla y en headless:

La última fila no cambia y las del medio cambian todas de dueño. Por eso un proyecto headless necesita una lista de lo que el tema hacía antes de apagarlo. Clione, por ejemplo, funciona en Hydrogen: el frontend pinta en el servidor el grafo de datos estructurados, las meta etiquetas y las preguntas frecuentes a partir de los metafields del producto.

Cómo comprobarlo

1. Mira el código fuente de una ficha, no el inspector del navegador: el título, el precio y el JSON-LD tienen que estar en el HTML que llega del servidor.⁠^{[4]Google Search Central. Understand JavaScript SEO basics}
2. Inspecciona la misma URL en Search Console y compara el HTML renderizado con el código fuente. Lo que solo aparece después de renderizar depende de que el bot ejecute JavaScript.
3. Abre /robots.txt y /sitemap.xml en el dominio de la tienda y comprueba que existen y que listan las URL del frontend.⁠^{[5]Shopify (shopify.dev). Getting started with Hydrogen and Oxygen}
4. Revisa la canonical de una ficha en el código fuente y en el HTML renderizado: si JavaScript la cambia a un valor distinto del original, incumple lo que pide Google.⁠^{[4]Google Search Central. Understand JavaScript SEO basics}
5. Si la tienda está en Shopify, confirma que los productos están publicados en el canal Hydrogen o Headless y que sus rutas siguen el formato que pide Shopify Catalog.⁠^{[6]Shopify Help Center. Requirements for being included in Shopify Catalog}

Concepto cercano: renderizado del lado del servidor

Headless habla de arquitectura: quién guarda los datos y quién los presenta. El renderizado del lado del servidor habla de técnica: dónde se genera el HTML de cada página. Una tienda con plantilla ya se renderiza en el servidor; una tienda headless puede hacerlo, como Hydrogen, o no hacerlo, si su frontend pinta las páginas en el navegador.⁠^{[2]Shopify (shopify.dev). Build headless commerce} La pregunta útil ante un proyecto headless no es si es headless, sino dónde se genera el HTML, y para eso está el término de renderizado de JavaScript.

Para seguir, la ruta de lectura de publicación por plataforma ordena el resto de términos, de Liquid y los widgets de BigCommerce a la API de catálogo.