# Qué es Catalyst, el storefront headless de BigCommerce > Qué es Catalyst, el frontend de BigCommerce sobre Next.js, qué deja de hacer el tema Stencil y qué revisar para que buscadores y asistentes lean tu tienda. URL: https://clione.ai/es/glosario/catalyst/ Lang: es 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](/es/glosario/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](/es/glosario/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**.[^bc-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.[^gh-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.[^bc-catalyst-press] 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.[^bc-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](/es/glosario/api-de-catalogo/) de administración, que gestiona productos, categorías y marcas.[^bc-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.[^bc-catalyst-start] La aplicación puede alojarse en cualquier servicio que ejecute Node.js; la demostración de BigCommerce está en Vercel.[^bc-catalyst] Si usas Makeswift, los productos se sincronizan con el editor mediante [webhooks](/es/glosario/webhook/), una función que BigCommerce marca todavía como beta.[^bc-catalyst-start] ## 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](/es/glosario/stencil/), `/xmlsitemap.php`, a `/sitemap.xml`. Lo que no cubre: **si otro sistema genera páginas con URL propias, su [sitemap XML](/es/glosario/sitemap-xml/) se envía aparte**.[^bc-catalyst-sitemap] **Las regiones de los widgets no existen.** En una tienda con tema, un [widget de BigCommerce](/es/glosario/widget-bigcommerce/) se coloca en una región, y las regiones son huecos que se declaran en los archivos de plantilla de Stencil.[^bc-widgets] Catalyst no carga esas plantillas: es una aplicación de Next.js.[^bc-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](/es/glosario/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 `` refleja el idioma activo de la tienda en lugar de quedarse en inglés por defecto.[^bc-catalyst-170] 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: | Pieza | Con tema Stencil | Con Catalyst | Qué revisar | | ---------------------------------------- | --------------------------------------------------------- | ---------------------------------- | ----------------------------------------------- | | Datos del producto | BigCommerce | BigCommerce, servidos por API | Nada cambia | | Título y descripción de la ficha | El tema, con los campos `page_title` y `meta_description` | El código del frontend, si los lee | Que salgan en el HTML de cada ficha | | Marcado [JSON-LD](/es/glosario/json-ld/) | El tema o un widget en una región | El código del frontend | Que no se pierda con el cambio | | Sitemap | BigCommerce | BigCommerce, servido por Catalyst | Las URL de páginas que no vengan de BigCommerce | | Idioma de la página | El tema | Catalyst, bien desde la 1.7.0 | El atributo `lang` | Los campos `page_title` y `meta_description` existen en el producto de la API de catálogo,[^bc-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: ```bash curl -s https://tripodes-ejemplo.com/tripode-viaje/ | grep -E "|name=\"description\"|application/ld\+json" ``` Si alguna de las cuatro no aparece, el HTML que recibe un [rastreador](/es/glosario/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. **Ver `mybigcommerce.com` en tu sitemap no significa que tus páginas estén indexadas en ese dominio.** El índice de `/sitemap.xml` enlaza sitemaps alojados en la URL permanente del canal, pero las URL de las páginas que contienen usan el dominio de tu tienda, y la documentación de Catalyst lo aclara con esas mismas palabras.[^bc-catalyst-sitemap] La confusión contraria es más cara: tratar Catalyst como un tema más. No se aplica sobre la tienda como se cambia de tema: crea un canal propio y es otra aplicación, con su propio alojamiento, así que lo que el tema resolvía hay que volver a resolverlo en código.[^bc-catalyst-start][^bc-catalyst][^bc-widgets] ## 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.[^bc-catalyst-sitemap] 3. **Pide `/xmlsitemap.php`** y confirma que redirige a `/sitemap.xml`; si enviaste el sitemap antiguo a [Search Console](/es/glosario/search-console/), cámbialo por el nuevo.[^bc-catalyst-sitemap] 4. **Mira el atributo `lang`** de la etiqueta `` en una ficha en español. Si dice `en`, comprueba la versión de Catalyst: el cambio llegó en la 1.7.0.[^bc-catalyst-170] 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.[^bc-widgets] ## Concepto cercano: Stencil [Stencil](/es/glosario/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.[^bc-widgets] 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.[^bc-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](/es/glosario/ssr/). Para seguir, la [ruta de lectura de publicación por plataforma](/es/aprender/publicacion-por-plataforma/) ordena el resto de términos, y la página de [Clione en tiendas headless](/es/compatible-con/headless/) cuenta cómo llegan sus señales a un frontend así.