¿Qué es Catalyst, el storefront de BigCommerce?

Hay varios Catalyst en el software, y este no es el de Apple para llevar apps de iPad al Mac. Aquí Catalyst es el frontend que BigCommerce publica para montar una tienda headless commerce: una aplicación propia, en Next.js, que sustituye al tema de siempre. Te importa si una agencia te propone «pasar a Catalyst». La tienda puede ganar en diseño y en velocidad, pero todo lo que el tema hacía por tu SEO, desde el título de cada ficha de producto hasta el marcado, pasa a depender del código de esa aplicación.

Cómo funciona

BigCommerce lo define como un framework de storefront headless, componible y totalmente personalizable, construido con Next.js y componentes de React para la tienda. Usa componentes de servidor de React y límites de Suspense, y pide los datos a la GraphQL Storefront API.⁠^{[1]BigCommerce Docs. Catalyst} El código es abierto, con licencia MIT, y una tienda nueva se crea desde la línea de comandos con pnpm create @bigcommerce/catalyst@latest. Hace falta una cuenta de BigCommerce y Node.js 24.⁠^{[2]BigCommerce en GitHub. bigcommerce/catalyst}

Llegó el 8 de febrero de 2024. BigCommerce lo presentó como una arquitectura de referencia para que desarrolladores y agencias lanzaran tiendas más deprisa, con un cliente de GraphQL optimizado para la última versión de Next.js y para los componentes de servidor de React. Dijo haberlo diseñado a partir de más de 4.000 implementaciones headless existentes, con el objetivo de sacar un 100 en Google Lighthouse de serie, y con Makeswift, el editor visual de páginas que había comprado a finales de 2023, como pieza central.⁠^{[3]BigCommerce, nota de prensa. BigCommerce Unveils Catalyst Storefront Technology, Empowering Rapid Launches of Composable Ecommerce Experiences} Un objetivo de partida no es una medida de tu tienda: en cuanto el equipo añade código, la puntuación es la suya.

La tienda tiene dos mitades. BigCommerce guarda los datos y hace el trabajo de comercio; Catalyst los pide y pinta las páginas. Para pedirlos usa las API de storefront de BigCommerce, que la propia plataforma describe como pensadas para las acciones del comprador en la tienda: consultar el catálogo, iniciar sesión, el carrito y el checkout.⁠^{[4]BigCommerce Developer Learning. Storefront APIs} Para cambiar el catálogo, un producto, su precio o sus campos de SEO, se usa otra puerta, la API de catálogo de administración, que gestiona productos, categorías y marcas.⁠^{[5]BigCommerce API Reference. Catalog - Products}

Ponerlo en marcha también es distinto. Necesitas una tienda o un sandbox de BigCommerce y permisos para crear canales e instalar aplicaciones, y el proceso crea un canal de Catalyst en la tienda.⁠^{[6]BigCommerce Docs. Getting started with Catalyst} La aplicación puede alojarse en cualquier servicio que ejecute Node.js; la demostración de BigCommerce está en Vercel.⁠^{[1]BigCommerce Docs. Catalyst} Si usas Makeswift, los productos se sincronizan con el editor mediante webhooks, una función que BigCommerce marca todavía como beta.⁠^{[6]BigCommerce Docs. Getting started with Catalyst}

Lo que cambia para el SEO

El sitemap no lo escribe Catalyst. Cuando alguien pide /sitemap.xml, Catalyst pide el índice a BigCommerce, a la URL propia del canal, y lo devuelve como si fuera suyo. El índice se sirve desde el dominio de tu tienda, los sitemaps que enlaza están en una URL permanente de mybigcommerce.com y las URL de las páginas, dentro, usan el dominio que hayas configurado. BigCommerce redirige además el sitemap antiguo de Stencil, /xmlsitemap.php, a /sitemap.xml. Lo que no cubre: si otro sistema genera páginas con URL propias, su sitemap XML se envía aparte.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}

Las regiones de los widgets no existen. En una tienda con tema, un widget de BigCommerce se coloca en una región, y las regiones son huecos que se declaran en los archivos de plantilla de Stencil.⁠^{[8]BigCommerce Dev Center. Widgets API} Catalyst no carga esas plantillas: es una aplicación de Next.js.⁠^{[1]BigCommerce Docs. Catalyst} Lo que una app instalada metía en la ficha a través de una región, sea un banner o un bloque de datos estructurados, no tiene dónde caer hasta que alguien lo programe en el frontend.

El idioma de la página. Desde la versión 1.7.0, el atributo lang de la etiqueta <html> refleja el idioma activo de la tienda en lugar de quedarse en inglés por defecto.⁠^{[9]BigCommerce Docs. Catalyst 1.7.0 release notes} Si tu tienda vende en español y corre una versión anterior, sus páginas se declaran en inglés.

En una tienda

Un ejemplo ficticio: una tienda de trípodes en BigCommerce que pasa de su tema Stencil a Catalyst. Esta es la lista de quién hace cada cosa antes y después, con lo que hay que revisar:

Los campos page_title y meta_description existen en el producto de la API de catálogo,⁠^{[5]BigCommerce API Reference. Catalog - Products} así que el dato no se pierde al cambiar de frontend: lo que puede perderse es que alguien lo pinte. La comprobación cabe en una línea, con la URL de una ficha de esa tienda inventada:

curl -s https://tripodes-ejemplo.com/tripode-viaje/ | grep -E "<html lang|<title>|name=\"description\"|application/ld\+json"

Si alguna de las cuatro no aparece, el HTML que recibe un rastreador que no ejecuta JavaScript no la lleva. Clione, en una tienda BigCommerce con tema, publica su grafo de datos estructurados con la Widget API y se pinta en el servidor; en Catalyst, sus señales llegan al frontend con un paquete propio que se configura con cada tienda.

Cómo comprobarlo

1. Pide una ficha sin ejecutar JavaScript, con curl o con «Ver código fuente», y busca el título, la descripción, el JSON-LD y el precio en el HTML que llega del servidor.
2. Abre /sitemap.xml y comprueba que las URL de las páginas usan el dominio de tu tienda. Que el índice apunte a mybigcommerce.com es lo esperado.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}
3. Pide /xmlsitemap.php y confirma que redirige a /sitemap.xml; si enviaste el sitemap antiguo a Search Console, cámbialo por el nuevo.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}
4. Mira el atributo lang de la etiqueta <html> en una ficha en español. Si dice en, comprueba la versión de Catalyst: el cambio llegó en la 1.7.0.⁠^{[9]BigCommerce Docs. Catalyst 1.7.0 release notes}
5. Haz inventario de las apps que tocaban el tema antes de migrar: todo lo que colocaban en regiones de Stencil hay que rehacerlo en el frontend.⁠^{[8]BigCommerce Dev Center. Widgets API}

Concepto cercano: Stencil

Stencil es el sistema de temas de BigCommerce: plantillas con Handlebars que la plataforma pinta y aloja, con regiones donde las apps colocan widgets sin tocar el código.⁠^{[8]BigCommerce Dev Center. Widgets API} Catalyst no es un tema de Stencil más moderno, sino otra forma de construir la tienda: una aplicación aparte que habla con BigCommerce por API y que tú, o tu agencia, alojas y mantienes.⁠^{[1]BigCommerce Docs. Catalyst} Con Stencil, el tema y la plataforma son la misma pieza; con Catalyst, son dos, y la frontera entre ellas es justo donde se pierden las cosas en una migración. Si el HTML se genera o no en el servidor es otra pregunta, y la responde el renderizado del lado del servidor.

Para seguir, la ruta de lectura de publicación por plataforma ordena el resto de términos, y la página de Clione en tiendas headless cuenta cómo llegan sus señales a un frontend así.