Migración Estratégica a JAMstack – Recambios Moral

El reto: Superar las limitaciones de un WordPress Legacy

El cliente contaba con una presencia digital basada en un WordPress monolítico, sobrecargado de plugins y maquetadores visuales. El resultado era una web con una puntuación de 30/100 en PageSpeed móvil, lo que penalizaba el SEO y frustraba a los usuarios (mecánicos y transportistas) que necesitaban consultar el catálogo desde dispositivos con baja cobertura.

Mi objetivo: Transformar este "sitio pesado" en una herramienta de negocio ultrarrápida, segura y con costes de infraestructura cero.

🛠 El Stack Tecnológico (Modern & Scalable)

Para este proyecto, decidí romper con el ecosistema tradicional y apostar por una arquitectura desacoplada:

• Frontend: Astro (Static Site Generation - SSG).
• Headless CMS: Sanity.io.
• Diseño: Tailwind CSS.
• Despliegue: Netlify Edge Computing.
• Productividad: Desarrollo asistido por IA (GitHub Copilot + Claude 3.5 Sonnet).

🚀 Flujo de Trabajo Optimizado: De VSCode a Producción

1. Modelado de Datos Programático (Content-as-Code)

A diferencia del flujo tradicional de WordPress (basado en clics en interfaz), instalé y configuré Sanity Studio íntegramente desde la terminal.

• Definición de Schemas: Modele las familias y recambios directamente en archivos .ts dentro de VSCode.
• Control de Versiones: Al ser código, toda la estructura del CMS está versionada en Git, permitiendo una trazabilidad total.

2. Diseño UX y Desarrollo de Componentes

Utilicé Tailwind CSS para crear una interfaz limpia y profesional. Con el apoyo de IA (Copilot y Claude), aceleré la creación de componentes de UI en Astro, garantizando que el diseño fuera 100% responsive y accesible. El enfoque fue "Mobile-First", priorizando la localización de familias de recambios en menos de 3 clics.

3. Conexión Astro-Sanity y "Zero Manual Entry"

Para maximizar la eficiencia, no introduje las familias de productos a mano a través de una interfaz visual:

• Scripting de datos: Desarrollé un script de inyección de datos para cargar las familias y su información técnica directamente en Sanity desde el entorno de desarrollo.
• Consultas GROQ: Configuré las queries de Sanity para alimentar las páginas estáticas de Astro durante el proceso de build.

4. Automatización y Despliegue (CI/CD)

El proyecto se desplegó en Netlify con una infraestructura de coste 0€.

• Webhooks: Configuré un sistema de reconstrucción automática. Cuando el cliente modifica algo en el panel de Sanity, se dispara un Webhook que ordena a Netlify regenerar el sitio estático.
• Resultado: Seguridad absoluta (sin base de datos expuesta) y velocidad de carga instantánea gracias a la distribución global por CDN.

📈 Resultados: El impacto en el negocio

PageSpeed Móvil

WordPress - 30 / 100 🔴

Astro- 84 / 100 🟢

Coste Hosting: 0 € / Mes

Seguridad: Inmunidad Total (SSG)

Workflow: Automático vía Git/Webhooks