Cómo migramos un E-commerce monolítico a Next.js reduciendo el TTI un 40%
Análisis técnico de la refactorización profunda para un pure-player de la industria de la iluminación que sufría caídas masivas en picos de ventas por culpa de un Magento extremadamente acoplado y obsoleto.
El Caos del Legacy
La infraestructura anterior era incapaz de mantener el tráfico paralelo del Black Friday, produciendo latencias absurdas de hasta 8 segundos durante el cálculo de carritos de la compra. Magento funcionaba bien hace años, pero con cientos de plugins solapados, el Time To Interactive (TTI) era letal para el abandono del carrito.
En Folents no hacemos "parches de CSS". Atacamos el mal de raíz: La Arquitectura.
Decidimos crear una bifurcación total hacia una arquitectura Headless Commerce.
Fase 1: Desacoplamiento (API Proxy)
Separar el front-end del back-end es como operar a corazón abierto. Levantamos una capa intermedia con Node.js (Proxy) para ir reconectando endpoints sin molestar la tienda en producción.
// Ejemplo de proxy adapter (simplificado)
export async function getCartStock(productId: string) {
// Ahora la consulta es delegada a una cache Edge en lugar del DB pesado
const cache = await kv.get(`stock_${productId}`);
if (cache) return cache;
const data = await backendClient.fetchStock(productId);
return data;
}
Fase 2: Front-End Elástico con React Server Components
El uso masivo de componentes marcados explícitamente con "use client" era lo que generaba enormes bundles en otro proyecto competidor. Para nosotros, el paradigma era claro:
- El 90% de la UI del E-Commerce debe ser pasiva y resolverse en el servidor.
- Usamos
<Suspense>solo para pasarelas de pago o zonas de calculadoras de stock volátiles.
El Impacto Técnico y Comercial
El Lighthouse rebotó instantáneamente al rango del 95-100.
El Largest Contentful Paint (LCP) bajó de 4.3 segundos a 0.8s.
La carga cognitiva de la pasarela quedó eliminada con la micro-interacción en estado isLoading (gracias a Next.js 14 y Turbo).
El Product Engineering bien ejecutado no es "un gasto", es inversión en retención inmediata de mercado.