Contexto
ABASA (Abastecedora Industrial) es una empresa de suministros industriales con presencia a ambos lados de la frontera —Piedras Negras, Coahuila y Eagle Pass, Texas— que ofrece miles de productos: mangueras, rodamientos, EPP, abrasivos, tornillería, herramienta y material eléctrico. El sitio público de abasa.us es la cara comercial del producto: no es solo una landing estática, sino un catálogo navegable con flujos de cotización, carrito y soporte.
El proyecto se desarrolló entre marzo y abril de 2026, como parte de un equipo, donde participé como desarrollador frontend integrando secciones, islas interactivas y experiencias de cliente sobre la base de Astro.
El reto
El sitio tenía que cumplir dos objetivos en tensión: ser una pieza de marketing rápida y pulida, y a la vez un catálogo real conectado a datos de producto. Esto implicaba renderizar contenido dinámico desde una base de datos, mantener tiempos de carga bajos, soportar dos idiomas (español e inglés) y dos regiones (México y Estados Unidos), y ofrecer interacciones ricas sin convertir la home en una SPA pesada.
A esto se sumaba el requisito de capturar prospectos de forma confiable —cotizaciones y solicitudes de cuenta— con validación robusta y defensas anti-bot.
Arquitectura
El sitio está construido con Astro 6 en modo output: "server" usando el adaptador de Node en modo standalone, desplegado vía Docker. La interactividad se resuelve con el patrón de islands: la home compone secciones (BrandVideoBanner, ProductShowcase, ControlInventarios, UbicacionFisica, etc.) hidratadas selectivamente con directivas client:visible, client:idle y client:only, de modo que solo se envía JavaScript donde realmente se necesita.
Los datos del catálogo —categorías y productos destacados— se obtienen en SSR directamente desde MongoDB (src/lib/mongodb.ts), con cachés en memoria (TTL de 5–10 min) para estadísticas, categorías y traducciones de subcategorías. Funcionalidades más dinámicas (chat, recomendaciones, búsqueda ERP, cotizaciones) se delegan a un backend REST (api.abasa.app).
Un middleware (src/middleware.ts) centraliza el manejo de errores (reescribe a /500) y aplica cabeceras de caché por tipo de recurso: immutable para assets con hash, TTL moderado con stale-while-revalidate para imágenes, y s-maxage en el edge de Cloudflare para HTML.
Funcionalidades clave
- Catálogo bilingüe es/en con rutas espejo (
/productos–/products,/catalogo–/catalog,/cotizar–/quote) y un sistema de i18n propio basado en un diccionario tipado y un hookuseLocale. - Recomendaciones con IA (
AiRecommendations) y un chat de soporte (SupportChat) que conversa, sugiere productos y los añade al carrito, parseando enlaces de producto desde markdown. - Carrito y comparador persistidos en
localStoragecon eventos personalizados para sincronizar islas; recientemente vistos y comparación de hasta 4 productos. - Cotización y solicitud de cuenta vía endpoints
POST(/api/quote-request,/api/account-request) con validación por regex, honeypot y timing anti-bot antes de reenviar al backend. - Registration gate que protege precios y fichas técnicas tras registro, con copy contextual por motivo.
- Tema claro/oscuro con transición animada, fichas técnicas, curvas de desempeño con Recharts y zoom de imágenes.
Decisiones técnicas y retos
La principal decisión fue apoyarse en islas de Astro en lugar de un framework SPA: permite SSR para SEO y first paint rápido, mientras React 19 aporta interactividad puntual. Para que el bundle no creciera sin control, configuré manual chunks en Vite separando lucide, motion y los componentes de animación (spell), y se marcaron como noExternal librerías como recharts y react-zoom-pan-pinch para que el SSR las resolviera correctamente.
El bilingüismo es/en y la doble región mexicano/estadounidense obligaron a un i18n consistente en todo el sitio: rutas duplicadas, traducciones de categorías y subcategorías cacheadas, y constantes de empresa (teléfonos, direcciones, horarios) por ubicación.
La captura de prospectos se endureció en la frontera del frontend —validación estricta de nombre, empresa, email, teléfono y urgencia, más honeypot y marca de tiempo— para reducir spam antes de tocar el backend, propagando además la IP real del visitante.
Resultado
El resultado es un sitio público en producción en abasa.us que funciona simultáneamente como pieza de marketing y como catálogo industrial navegable, bilingüe y conectado a datos reales. La arquitectura de islas sobre Astro SSR mantiene la experiencia ligera y favorable al SEO (sitemap, caché en el edge), mientras las capacidades asistidas por IA —chat de soporte y recomendaciones— y los flujos de cotización y carrito acercan al visitante a la conversión sin fricción.