El stack técnico para construir un e-commerce en 2024

Después de crear múltiples tiendas online con diferentes tecnologías, siempre se llega al mismo esquema: un backend, un frontend con SEO, una pasarela de pagos y correos transaccionales. Aquí está la guía completa.

Por Fazt · fazt.dev · FaztCode

Desarrollar un e-commerce es uno de los proyectos más comunes en el mundo del desarrollo web. Hay mucha información disponible sobre cómo crearlos, pero pocas guías explican qué tecnologías elegir y por qué. Después de haber construido varios proyectos de este tipo con distintos enfoques, el diseño final siempre converge en la misma estructura: un backend, un frontend, una pasarela de pagos y algún servicio de nube para notificaciones y seguimiento.

Esta guía resume ese stack de forma genérica, con las consideraciones clave que debes tener en cuenta antes de empezar a codear.

¿Qué necesita un e-commerce básico?

Antes de definir las tecnologías, conviene tener claro qué funcionalidades son imprescindibles:

• Lógica de backend para manejar productos, órdenes y usuarios
• Base de datos escalable que pueda crecer con el negocio (inventarios, newsletter, CRM)
• Pasarela de pagos para cobrar de forma automática
• Correos transaccionales: confirmaciones de compra, recuperación de carrito abandonado, reseteo de contraseña
• Capacidad de escalar sin cambiar de tecnología

El stack recomendado

Este es el diseño que cubre todos esos requisitos sin sobre-ingeniería:

Por qué Next.js y no React puro

Esta es probablemente la decisión más importante del frontend. Si bien React con Vite es una excelente opción para dashboards y paneles privados, tiene una limitación crítica para un e-commerce: el SEO.

React con Vite genera todas las páginas con JavaScript puro. Esto hace que los motores de búsqueda tengan dificultades para indexar el contenido, ya que el HTML no está disponible desde el primer render. Para páginas de productos que deben aparecer en Google, esto es un problema grave.

Next.js resuelve exactamente este problema al permitir que convivan dos mundos:

• Páginas públicas (productos): generadas como HTML estático (SSG), rápidas e indexables por Google.
• Panel de administración: funciona completamente en el cliente con JavaScript puro (CSR).

Todo dentro del mismo proyecto. Las páginas de productos tienen sus propios meta tags, título y descripción, lo que las hace fácilmente descubribles en buscadores.

Alternativas válidas a Next.js: Nuxt.js (para Vue), SvelteKit, Remix y TanStack Start. Todos ofrecen rendering híbrido similar. Next sigue siendo la opción más popular y con más documentación disponible.

Backend: Node.js con REST API

Si trabajas solo o en un equipo pequeño, lo más práctico es elegir algo en el ecosistema JavaScript. Bun es una opción moderna y más rápida para construir el backend, pero Node.js tiene mucho más soporte de despliegue y documentación.

Para la comunicación entre frontend y backend, lo más sencillo y efectivo es construir una REST API. GraphQL o tRPC son opciones válidas, pero para un e-commerce estándar añaden complejidad innecesaria al inicio.

ORM: Prisma o Drizzle

Conectar el backend a PostgreSQL sin un ORM implica escribir SQL manualmente. Los ORM (Object Relational Mapping) generan la estructura de las tablas a partir del código, lo que acelera muchísimo el desarrollo inicial. Prisma es la opción más documentada; Drizzle es más ligero y performante. Ambos hacen el mismo trabajo.

Pasarelas de pago: la parte más crítica

La integración de pagos es el componente más delicado de todo el proyecto. La elección depende directamente de tu mercado:

Stripe — Recomendado a nivel global. Integración simple, documentación excelente. Disponible en la mayoría de países. Es la opción más directa para empezar a cobrar online.

Mercado Pago — Dominante en Latinoamérica. Viene de Mercado Libre. La documentación puede ser algo confusa pero es la pasarela más adoptada en la región.

PayPal — No requiere las mismas reglas de Stripe o Mercado Pago, pero tiene comisiones más altas. Útil para productos de ticket elevado donde la comisión no representa un problema.

Pasarela local — En muchos países de LATAM existen opciones nativas que son más baratas, operan en moneda local y tienen mejor soporte para declaraciones fiscales. Siempre vale la pena evaluarlas.

Cómo funciona la integración: webhooks

La pasarela de pagos no solo procesa cobros. También gestiona reembolsos, descuentos y registros de ventas. La comunicación con tu backend se hace a través de webhooks: la pasarela envía una petición POST a una URL de tu servidor cada vez que ocurre un evento (compra completada, reembolso solicitado, pago fallido).

Esto es importante porque las transacciones no son instantáneas. Hay un intervalo de tiempo entre que el usuario paga y que el pago se confirma. El webhook notifica a tu backend cuando la transacción realmente se completó, momento en el que puedes actualizar el inventario, enviar el correo de confirmación y registrar la venta.

Correos transaccionales

Delegar el envío de correos a un servicio externo es una decisión de arquitectura importante. El servidor de backend ya tiene suficiente trabajo gestionando órdenes y respondiendo peticiones. Los servicios de correo transaccional se especializan en esta tarea y escalan independientemente.

Si conoces bien AWS, SES es la opción más económica a escala. Si priorizas velocidad de desarrollo, Resend o Brevo son más convenientes para empezar.

Dónde desplegarlo

Next.js no está atado a Vercel. Es un framework de Node.js y puede desplegarse en cualquier plataforma que soporte Node. Para proyectos en fase inicial o equipos pequeños, Railway es una opción muy práctica porque permite gestionar la base de datos, el backend y el frontend desde un mismo lugar, con un modelo de precios accesible.

Si el proyecto escala, siempre es posible migrar a AWS (EC2, ECS, Lambda) sin cambiar el stack tecnológico.

¿Y si quieres algo más sencillo?

Si no quieres desarrollar desde cero, existen plataformas como Shopify o WordPress + WooCommerce que permiten tener un e-commerce operativo sin escribir código. El costo a largo plazo es similar al de un desarrollo propio, pero la ventaja es que lo puedes administrar tú mismo sin conocimientos técnicos profundos.

La fórmula descrita en este artículo es para quienes quieren control total sobre su producto: personalización, escalabilidad y costos optimizados según el crecimiento real del negocio.

Este artículo está basado en el video "E-commerce Stack" del canal FaztCode. Puedes ver más recursos en fazt.dev.