🎨 Sysprovider Code
Sysprovider LogoWiki
🇪🇸Hosting español para ecommerce

Headless commerce con PrestaShop y Next.js

Actualizado el 21 de octubre de 2025

El comercio electrónico tradicional, con su frontend y backend fuertemente acoplados, está dando paso a una nueva arquitectura más flexible y potente: headless commerce. Este enfoque desacopla la capa de presentación (frontend) de la lógica de negocio y gestión de productos (backend). En este artículo, exploraremos cómo implementar una solución headless combinando la robustez de PrestaShop como motor de comercio (backend) con la velocidad y modernidad de Next.js como capa de presentación (frontend).

Veremos desde los fundamentos de la PrestaShop API hasta la configuración de un proyecto Next.js, pasando por buenas prácticas de rendimiento y SEO. El objetivo es ofrecer una guía técnica completa para cualquier SysAdmin o desarrollador que quiera llevar su tienda PrestaShop al siguiente nivel.

¿Por qué Headless Commerce con PrestaShop?

El modelo tradicional de PrestaShop (tema Smarty, PHP en servidor) tiene limitaciones: el frontend está acoplado al backend, lo que dificulta escalar, integrar nuevas tecnologías (PWA, SSR) y ofrecer experiencias de usuario ultra rápidas. Con headless commerce, separamos ambos mundos.

Ventajas clave

  • Rendimiento superior: Next.js permite renderizado del lado del servidor (SSR) o generación estática (SSG). Las páginas se sirven como HTML estático o se renderizan en el servidor, reduciendo drásticamente el tiempo de carga.
  • Experiencia de usuario moderna: Podemos usar React, optimizar para móviles, implementar navegación sin recarga (SPA-like) y transiciones fluidas.
  • Escalabilidad independiente: El frontend (Next.js) puede escalar horizontalmente en CDNs (Vercel, Netlify) mientras el backend (PrestaShop) sigue en su servidor. No hay cuellos de botella compartidos.
  • Flexibilidad en el frontend: Libertad para elegir frameworks, librerías de UI (Tailwind, Material-UI) y lógica de presentación sin tocar el core de PrestaShop.
  • Preparado para el futuro: Fácil integración con canales adicionales (apps móviles, asistentes de voz, quioscos) usando la misma API.

¿Cuándo no es recomendable?

[WARNING] Headless commerce no es una bala de plata. Si tu tienda es pequeña, con pocos productos y sin necesidades de alto rendimiento, la complejidad añadida (gestión de dos sistemas, costes de infraestructura) puede no compensar. Evalúa siempre el ROI.

La PrestaShop API: Tu Puerta de Acceso al Backend

PrestaShop expone una API RESTful (y también WebService XML) que nos permite acceder a todos los recursos: productos, categorías, clientes, pedidos, carritos, etc. Esta API es el corazón de nuestra arquitectura headless.

Configuración inicial de la API

  1. Activar la API: En el back office de PrestaShop, ve a Parámetros Avanzados > Web Service. Activa la opción "Activar el Web Service".
  2. Crear una clave de API: Crea un nuevo recurso de API. Asigna una clave (token) y selecciona los permisos (GET, POST, PUT, DELETE) para cada recurso. Para un frontend de tienda, normalmente solo necesitas GET (lectura) para productos, categorías y CMS, más POST/PUT para carritos y pedidos.
  3. Probar el acceso: Puedes probar con curl o Postman. Por ejemplo: 
    curl -X GET "https://tutienda.com/api/productos?display=full&limit=10" \
     -H "Authorization: Basic BASE64_TOKEN"
    (Nota: PrestaShop usa Basic Auth con el token como usuario y contraseña vacía).

Recursos clave para el frontend

  • productos: GET /api/productos con filtros (filter[active]=1, filter[id_category_default]=ID).
  • categorías: GET /api/categorias para el árbol de navegación.
  • carritos: POST /api/carritos para crear un carrito, GET /api/carritos/{id} para leerlo.
  • pedidos: POST /api/pedidos para finalizar la compra.
  • clientes: POST /api/clientes para registro, GET /api/clientes/{id} para perfil.
  • cms: GET /api/content_management_system para páginas estáticas.

Limitaciones y optimizaciones

La API de PrestaShop no es perfecta. No soporta GraphQL de forma nativa, y las respuestas pueden ser pesadas (XML o JSON). Para un headless eficiente, considera:

  • Usar JSON: Configura el header Output-Format: JSON en tus peticiones.
  • Cachear respuestas: Implementa un middleware de caché (Redis, Varnish) entre Next.js y PrestaShop. La API no tiene un potente sistema de caché por defecto.
  • Campos específicos: Usa ?display=full solo cuando sea necesario. Para listados, usa ?display=[id,name,price,link_rewrite] para reducir el payload.

Next.js: El Frontend Desacoplado Perfecto

Next.js es un framework de React que ofrece renderizado híbrido (SSR, SSG, ISR). Para un headless commerce, es ideal porque:

  • SSR: Las páginas de producto se renderizan en el servidor, ofreciendo HTML completo a los motores de búsqueda (SEO).
  • ISR (Incremental Static Regeneration): Podemos generar páginas estáticas para productos populares y regenerarlas cada X tiempo sin reconstruir todo el sitio.
  • API Routes: Podemos crear endpoints propios en Next.js para orquestar llamadas a la PrestaShop API, añadir lógica de caché o transformar datos.

Estructura del proyecto

mi-tienda-headless/
├── pages/
│   ├── index.js          # Página de inicio (SSR o ISR)
│   ├── productos/
│   │   └── [slug].js     # Página de detalle de producto (SSR)
│   └── categoria/
│       └── [slug].js     # Listado de productos por categoría (SSR)
├── lib/
│   ├── prestashop.js     # Cliente para la API de PrestaShop
│   └── cache.js          # Lógica de caché (Redis opcional)
├── components/
│   ├── Layout.js
│   ├── ProductCard.js
│   └── Carrito.js
├── styles/
└── next.config.js

Configuración del cliente API

Crea un módulo en lib/prestashop.js:

const API_URL = process.env.PRESTASHOP_API_URL;
const API_KEY = process.env.PRESTASHOP_API_KEY;

export async function fetchPrestaShop(endpoint, params = {}) {
  const url = new URL(`${API_URL}/api/${endpoint}`);
  url.search = new URLSearchParams(params).toString();
  
  const response = await fetch(url, {
    headers: {
      'Authorization': `Basic ${Buffer.from(API_KEY + ':').toString('base64')}`,
      'Output-Format': 'JSON',
    },
    next: { revalidate: 60 }, // ISR: regen cada 60 segundos
  });
  
  if (!response.ok) throw new Error(`PrestaShop API error: ${response.status}`);
  return response.json();
}

Página de producto con SSR

En pages/productos/[slug].js:

import { fetchPrestaShop } from '../../lib/prestashop';

export async function getServerSideProps({ params }) {
  const slug = params.slug;
  // Buscar producto por link_rewrite
  const data = await fetchPrestaShop('productos', {
    'filter[link_rewrite]': slug,
    'display': 'full',
  });
  
  if (!data.productos || data.productos.length === 0) {
    return { notFound: true };
  }
  
  const producto = data.productos[0];
  return {
    props: { producto },
  };
}

export default function ProductoPage({ producto }) {
  return (
    <div>
      <h1>{producto.name}</h1>
      <p>{producto.description_short}</p>
      <span>{producto.price} €</span>
      {/* Añadir al carrito */}
    </div>
  );
}

[TIP] Usa getStaticPaths + getStaticProps con ISR para productos con mucho tráfico. Para catálogos grandes, combina SSR en las primeras visitas y luego cachea.

Gestión del Carrito y Pedidos

El carrito es un estado compartido entre frontend y backend. La mejor práctica es:

  1. Crear carrito en PrestaShop: Cuando un usuario añade su primer producto, llama a POST /api/carritos con los datos del producto.
  2. Guardar ID del carrito: Almacena el id_carrito en una cookie (HttpOnly) o en localStorage (para usuarios no logueados).
  3. Operaciones: Para añadir/quitar productos, usa PUT /api/carritos/{id} con los nuevos datos (array de productos).
  4. Checkout: Al finalizar, llama a POST /api/pedidos con los datos del carrito y del cliente.

Ejemplo de añadir al carrito

export async function addToCart(productId, quantity, cartId) {
  if (!cartId) {
    // Crear nuevo carrito
    const newCart = await fetchPrestaShop('carritos', {
      method: 'POST',
      body: JSON.stringify({
        carrito: {
          id_currency: 1,
          id_lang: 1,
          productos: [{ id_product: productId, quantity }],
        }
      }),
    });
    return newCart.carrito.id;
  } else {
    // Actualizar carrito existente
    const cart = await fetchPrestaShop(`carritos/${cartId}`);
    cart.carrito.productos.push({ id_product: productId, quantity });
    await fetchPrestaShop(`carritos/${cartId}`, {
      method: 'PUT',
      body: JSON.stringify(cart),
    });
    return cartId;
  }
}

[WARNING] La API de PrestaShop para carritos no es transaccional. En entornos de alta concurrencia, puedes tener problemas de consistencia. Considera usar un microservicio de carrito intermedio o implementar bloqueo optimista.

SEO y Rendimiento en Headless Commerce

Uno de los mayores mitos del headless es que perjudica el SEO. Con Next.js, es todo lo contrario.

Buenas prácticas SEO

  • SSR para contenido dinámico: PrestaShop no renderiza JS, así que las páginas de producto y categoría deben servirse con SSR. Next.js lo hace por defecto en getServerSideProps.
  • Meta tags dinámicos: Usa next/head para inyectar title, description, og:image, etc. 
    import Head from 'next/head';

export default function ProductoPage({ producto }) {
  return (
    <>
      <Head>
        <title>{producto.meta_title || producto.name}</title>
        <meta name="description" content={producto.meta_description} />
        <meta property="og:image" content={producto.cover_image} />
      </Head>
      {/* ... */}
    </>
  );
}
  • Sitemap dinámico: Genera un sitemap.xml con getServerSideProps o usando next-sitemap. Incluye todas las URLs de productos y categorías activas.
  • URLs canónicas: Asegúrate de que cada página tenga su canonical apuntando a la URL principal (sin parámetros).
  • Datos estructurados: Añade JSON-LD para productos (schema.org/Product) y migas de pan (BreadcrumbList).

Estrategias de caché

  • CDN: Despliega Next.js en Vercel, Netlify o Cloudflare Pages. Usa el edge network para servir páginas estáticas.
  • ISR: Para productos que cambian poco (precios, stock), usa revalidate en getStaticProps. Por ejemplo, 60 segundos para productos, 3600 para categorías.
  • Caché de API: Implementa un middleware en Next.js (API Route) que cachee las respuestas de PrestaShop en Redis o memoria. Ejemplo: 
    // pages/api/productos/[id].js
import { fetchPrestaShop } from '../../../lib/prestashop';
import cache from 'memory-cache';

export default async function handler(req, res) {
  const { id } = req.query;
  const cacheKey = `producto_${id}`;
  const cached = cache.get(cacheKey);
  if (cached) return res.json(cached);
  
  const data = await fetchPrestaShop(`productos/${id}`);
  cache.put(cacheKey, data, 60000); // 60 segundos
  res.json(data);
}

Consideraciones de Infraestructura y Seguridad

Despliegue

  • Frontend (Next.js): En Vercel (recomendado por su integración con ISR y edge functions) o en un VPS con Node.js y PM2.
  • Backend (PrestaShop): En tu servidor actual o en un VPS dedicado. Asegúrate de que la API solo sea accesible desde la IP del frontend (o mediante un token secreto).
  • Base de datos: PrestaShop usa MySQL/MariaDB. No expongas la base de datos directamente.

Seguridad

  • API Key: No incluyas la clave de API en el frontend (código del navegador). Todas las llamadas a PrestaShop deben hacerse desde el servidor Next.js (getServerSideProps, API Routes).
  • CORS: Configura CORS en PrestaShop para permitir solo tu dominio de frontend.
  • Rate Limiting: Implementa límites de peticiones en las API Routes de Next.js para evitar abusos.
  • Validación: Nunca confíes en datos del cliente. Valida y sanitiza todo en el servidor.

Monitorización

Usa herramientas como:

  • Sentry para errores en frontend y backend.
  • Datadog/New Relic para rendimiento de API y servidores.
  • Lighthouse para auditorías de rendimiento web.

Conclusión

Headless commerce con PrestaShop y Next.js no es una moda, es una evolución necesaria para tiendas que buscan rendimiento, escalabilidad y experiencia de usuario superior. Aunque la implementación inicial requiere más trabajo que un tema tradicional, los beneficios a medio y largo plazo son enormes: mejor SEO, tiempos de carga reducidos, facilidad para integrar nuevos canales y libertad total en el diseño.

[INFO] Recuerda que la clave del éxito está en una buena planificación: define bien tu estrategia de caché, elige qué páginas renderizar con SSR vs ISR, y monitoriza constantemente el rendimiento de la API de PrestaShop.

Si estás listo para dar el salto, empieza por configurar la API de PrestaShop, crea un proyecto Next.js básico con una página de producto, y ve iterando. El headless commerce es el futuro, y con estas herramientas, ya puedes construirlo hoy.

¿Tienes experiencia con headless commerce? Comparte tus desafíos y soluciones en los comentarios.

¿Necesitas ayuda?Son dos de nuestros técnicos, Agustín y Mikel, y están disponibles para resolver cualquier problema.

Hablar con ellos ahora
Agustín y Mikel