Migrar Gatsby a Astro | Social Animal

Gatsby tuvo una buena trayectoria. Fue pionero en la categoría de generadores de sitios estáticos basados en React e introdujo a miles de desarrolladores al JAMstack. Pero se ha estancado. Netlify adquirió Gatsby a principios de 2023, el desarrollo se ha ralentizado drásticamente, el ecosistema de plugins se está deteriorando, y los tiempos de compilación en sitios de contenido grande siguen siendo dolorosamente lentos.

Astro fue construido para resolver exactamente los problemas que Gatsby creó. Cero JavaScript por defecto, colecciones de contenido que reemplazan la complejidad de GraphQL, tiempos de compilación que hacen que Gatsby se vea vergonzosamente lento. Si mantienes un sitio de contenido de Gatsby, migrar a Astro no es solo una actualización, es algo que ya debería haber sucedido.

Los puntos débiles de Gatsby que impulsan la migración

Complejidad de GraphQL para datos simples

La capa de datos GraphQL de Gatsby fue innovadora cuando se lanzó. También fue masivamente excesiva para la mayoría de los sitios de contenido. ¿Quieres listar tus publicaciones de blog? Escribe una consulta GraphQL. ¿Quieres extraer frontmatter de un archivo markdown? Consulta GraphQL. ¿Quieres mostrar una imagen? Consulta GraphQL envuelta en un componente especial.

Para un sitio de marketing con 50 páginas, estás manteniendo docenas de consultas GraphQL solo para renderizar contenido que vive en tu propio sistema de archivos. La abstracción añade sobrecarga cognitiva sin beneficio proporcional.

Tiempos de compilación que escalan mal

El pipeline de compilación de Gatsby procesa cada página a través de su capa GraphQL, ejecuta transformaciones de imágenes y genera el bundle de React completo para cada ruta. Un sitio de contenido de 500 páginas puede tardar 10-15 minutos en compilarse. ¿Un sitio de 2,000 páginas? Estás mirando 30+ minutos, incluso con compilaciones incrementales habilitadas.

Cada actualización de contenido significa esperar. Cada corrección de tipografía significa esperar. Tu equipo de contenido comienza a ressentirse de la herramienta.

El ecosistema de plugins se está deteriorando

La fortaleza de Gatsby era su ecosistema de plugins—gatsby-plugin-image, gatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-remark. Muchos de estos plugins no han sido actualizado significativamente en más de un año. Los conflictos de dependencias se multiplican. Los avisos de seguridad se acumulan. Ejecutas npm audit y ves 47 vulnerabilidades, la mayoría enterradas profundamente en el árbol de dependencias de Gatsby.

Bundles de JavaScript pesados

Gatsby envía toda la API de React a cada visitante, incluso para páginas sin interactividad. Una página estática "Acerca de nosotros" sigue descargando React, ReactDOM y el runtime de Gatsby. Tus puntuaciones de Lighthouse sufren, los Core Web Vitals se desploman, y los usuarios en conexiones más lentas pagan el precio.

Lo que Astro te ofrece

Content Collections reemplazan GraphQL

Las content collections de Astro están construidas específicamente para sitios de contenido. Define un esquema en TypeScript, coloca tus archivos markdown en una carpeta, consultalos con getCollection('blog'). Sin GraphQL. Sin plugins especiales. Validación de frontmatter type-safe lista para usar.

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    image: z.string().optional(),
  }),
});

Eso es todo. Sin gatsby-node.js, sin API createPages, sin fragmentos GraphQL. Tu obtención de datos es una única llamada a función en el componente que la necesita.

Cero JavaScript por defecto

Astro envía cero JavaScript del lado del cliente a menos que optes explícitamente. Un sitio de marketing de 50 páginas envía HTML y CSS puro al navegador. Cuando necesitas interactividad—un formulario de contacto, un carrusel de imágenes, un widget de búsqueda—usas la arquitectura Islands de Astro para hidratar solo ese componente.

El resultado: puntuaciones de Lighthouse de 95-100 en mobile sin ningún truco de optimización.

Compilaciones sub-segundo

Astro se ejecuta en Vite. Un sitio de contenido de 500 páginas se compila en menos de 30 segundos. Un sitio de 2,000 páginas se compila en menos de 2 minutos. El reemplazo de módulos en caliente en desarrollo es instantáneo. Tu equipo de contenido puede ver cambios en milisegundos en lugar de esperar a que el servidor develop de Gatsby recompile su esquema GraphQL.

Componentes agnósticos del framework

¿Ya tienes componentes React de tu sitio de Gatsby? Astro los renderiza en el momento de compilación o los hidrata del lado del cliente, según tu elección. ¿Quieres migrar gradualmente a componentes de Astro, o probar Vue o Svelte para características específicas? Astro soporta todos ellos en el mismo proyecto.

Nuestro proceso de migración de Gatsby a Astro

Fase 1: Auditoría y arquitectura (Semana 1)

Comenzamos mapeando tu sitio de Gatsby existente—cada plantilla de página, cada consulta GraphQL, cada dependencia de plugin, cada ruta dinámica. Documentamos tu configuración de gatsby-node.js, identificamos plugins de origen personalizados y catalogamos todas las integraciones de terceros.

Desde allí, diseñamos la arquitectura de Astro: esquemas de colecciones de contenido, jerarquía de layouts, selecciones de integración y objetivo de implementación.

Fase 2: Migración de contenido (Semana 2)

Construimos scripts de migración automatizados que transforman tu contenido de la estructura de Gatsby a colecciones de contenido de Astro. Los esquemas de frontmatter se validan y normalizan. Los componentes MDX se mapean a sus equivalentes de Astro o se envuelven como islands del framework.

El uso de gatsby-image de Gatsby se convierte al componente <Image /> integrado de Astro, que maneja imágenes responsivas, conversión de formatos y carga diferida de forma nativa, sin cadena de plugins requerida.

Fase 3: Conversión de plantillas y componentes (Semanas 2-3)

Las plantillas de página de Gatsby se convierten en layouts y páginas de Astro. Los componentes React que no necesitan interactividad del lado del cliente se convierten en componentes de Astro—más simples, más rápidos, cero JS. Los componentes interactivos permanecen como React (u se reescriben) y usan directivas client: para hidratación parcial.

Reemplazamos los plugins de Gatsby con integraciones de Astro:

• gatsby-plugin-sitemap → @astrojs/sitemap
• gatsby-plugin-feed → RSS personalizado con @astrojs/rss
• gatsby-plugin-mdx → Soporte MDX integrado via @astrojs/mdx
• gatsby-plugin-sharp → Optimización de imágenes integrada via astro:assets

Fase 4: Preservación de SEO (Semana 3)

Aquí es donde las migraciones viven o mueren. Implementamos una estrategia de preservación de URL exhaustiva:

• Redirecciones 301 para cualquier cambio de estructura de URL, configuradas a nivel de hosting para redirecciones de latencia cero
• Etiquetas canónicas en cada página que coincidan con tu estructura de URL existente
• Datos estructurados (JSON-LD) migrados y validados contra Google Rich Results Test
• Etiquetas meta preservadas exactamente—title tags, descripciones, Open Graph, Twitter Cards
• Mapa XML del sitio regenerado y presentado a Google Search Console
• Auditoría de enlaces internos para detectar cualquier referencia rota post-migración

Monitoreamos Google Search Console durante 30 días post-lanzamiento para detectar problemas de indexación inmediatamente.

Fase 5: Pruebas y lanzamiento (Semana 4)

Pruebas completas de regresión visual contra tu sitio de Gatsby existente. Puntuaciones de rendimiento comparadas lado a lado. Auditoría de accesibilidad. Pruebas entre navegadores. Implementamos en una URL de staging para que tu equipo revise, luego hacemos el cambio sin tiempo de inactividad.

Si tu sitio de Gatsby estaba usando un service worker (común con gatsby-plugin-offline), implementamos un service worker de reemplazo que fuerza la invalidación de caché en los navegadores de visitantes existentes, un paso que la mayoría de guías de migración ignoran completamente.

Cronograma y precios

Una migración típica de Gatsby a Astro para un sitio de contenido con 50-200 páginas toma 3-4 semanas y comienza en $8,000. Los sitios más grandes con plugins de origen personalizados, enrutamiento dinámico complejo, o integración CMS pesada pueden necesitar 5-6 semanas.

Los factores de alcance incluyen: número de plantillas de página únicas, plugins de Gatsby personalizados, integraciones de API de terceros, y si deseas mantener componentes React o convertir todo a Astro nativo.

El resumen

Gatsby no está muerto, pero no está mejorando. Astro está en desarrollo activo, tiene una comunidad próspera, y fue diseñado desde cero para sitios web con contenido abundante. La ruta de migración está bien documentada, las ganancias de rendimiento son inmediatas, y tu equipo de desarrollo te agradecerá por eliminar la plantilla de GraphQL.

Deja de mantener un framework que se estancó. Pasa al que se está moviendo rápido.