Migración de Umbraco a Next.js

Por qué los equipos de Umbraco se están pasando a Next.js

Umbraco se ha ganado su reputación. Es de código abierto, flexible y profundamente integrado en el ecosistema .NET. Más de 16,900 empresas funcionan con él, y el Reino Unido representa aproximadamente el 31% de esa base de instalación. El reciente lanzamiento v17 LTS demuestra que el proyecto está vivo y bien.

Pero aquí viene la parte incómoda: la mayoría de los sitios Umbraco siguen siendo vistas Razor renderizadas en servidor detrás de IIS o Azure App Service. El frontend está fuertemente acoplado al backend .NET. La velocidad de página sufre. La contratación se vuelve más difícil cada año a medida que el grupo de talento se desplaza hacia React y TypeScript. Y tu equipo editorial está atrapado con un flujo de trabajo de publicación diseñado para una arquitectura monolítica, porque es exactamente eso.

Next.js resuelve estos problemas sin obligarte a tirar a la basura todo lo que has construido. Desde la v12, la Content Delivery API de Umbraco ha permitido un verdadero modo headless. Puedes mantener el backend de Umbraco e integrar un frontend Next.js en él. O hacer un corte limpio y migrar contenido a un CMS headless específico como Sanity o Payload.

Somos una agencia con sede en el Reino Unido. Conocemos el ecosistema Umbraco íntimamente porque está en todas partes aquí. También sabemos cuándo es hora de pasar a otra cosa.

Los verdaderos puntos débiles de Umbraco

Cuellos de botella de rendimiento

La tubería de renderización predeterminada de Umbraco produce HTML renderizado en servidor en cada solicitud a menos que coloques un almacenamiento en caché agresivo encima. Incluso con almacenamiento en caché de salida, el TTFB en Azure App Service típicamente cae entre 800ms y 2.5 segundos según el nivel de hosting y el rendimiento de la base de datos. Las puntuaciones de Lighthouse móvil para sitios Umbraco típicos se sitúan entre 45 y 65, muy por debajo de los umbrales de Core Web Vitals de Google.

Experiencia del desarrollador frontend

Las vistas Razor funcionan, pero son limitantes. Sin arquitectura basada en componentes. Sin reemplazo de módulos en caliente. Sin herramientas de sistema de diseño como Storybook. Los desarrolladores junior y de nivel medio cada vez más vienen de backgrounds de React y encuentran genuinamente frustrante la capa de templating Razor/C#. La contratación se convierte en el cuello de botella.

Costos y complejidad del hosting

Ejecutar Umbraco correctamente significa gestionar servidores Windows, bases de datos SQL Server y a menudo Azure Blob Storage para medios. Los costos mensuales de hosting para una configuración de grado de producción típicamente oscilan entre £150 y £500+ dependiendo del tráfico. Compáralo con un sitio Next.js estático o basado en ISR implementado en Vercel o Cloudflare Pages: no hay comparación.

Limitaciones de escalabilidad

Umbraco no escala horizontalmente sin esfuerzo significativo. El equilibrio de carga requiere una configuración cuidadosa del caché distribuido y la sincronización de base de datos. Un enfoque centrado en CDN con Next.js elimina la mayoría de esa complejidad por completo.

Rigidez en el modelado de contenido

Los Document Types de Umbraco son poderosos, pero están fuertemente acoplados a la capa de renderización. Reutilizar contenido en canales (aplicaciones móviles, quioscos, plataformas de terceros) requiere trabajo de API personalizado que la Content Delivery API solo resuelve parcialmente.

Dos caminos de migración: elige el que se adapte

Opción A: Backend Umbraco + Frontend Next.js

Este es el camino de bajo riesgo. Tu equipo de contenido sigue utilizando el backoffice familiar de Umbraco. Document Types, nodos de contenido, biblioteca de medios: todo permanece exactamente donde está. Construimos un frontend Next.js que consume la Content Delivery API introducida en v12+.

Este enfoque funciona bien cuando:

• Tu equipo editorial está profundamente invertido en el flujo de trabajo de Umbraco
• Tienes Document Types complejos con contenido anidado y editores de bloques
• Quieres reducir riesgos en la migración cambiando una capa a la vez
• Tu equipo .NET puede continuar manteniendo el backend

Mapeamos cada Document Type a un componente React correspondiente. Las vistas Razor se convierten en plantillas de página Next.js tipadas. Los layouts de Grid y los editores de Block List se convierten en componentes React componibles con interfaces TypeScript generadas desde tu esquema Umbraco.

Opción B: Migración completa a Sanity o Payload CMS

Este es el camino del corte limpio. Extraemos todo el contenido de Umbraco, lo transformamos y lo cargamos en un CMS headless moderno. Sanity te ofrece edición colaborativa en tiempo real y un sistema de esquema flexible. Payload CMS es de código abierto, auto-alojado y construido sobre Node.js, un compañero natural para Next.js.

Este enfoque tiene sentido cuando:

• Tu instancia de Umbraco es antigua (anterior a v10) y actualizar es caro
• Quieres eliminar completamente el hosting .NET
• Necesitas contenido estructurado que sirva múltiples canales
• Tu equipo quiere un stack JavaScript/TypeScript unificado

Escribimos scripts de migración personalizados que mapean Document Types a modelos de contenido CMS, preservan las relaciones entre nodos de contenido y manejan la migración de activos de medios con redirecciones de URL apropiadas.

Nuestro proceso de migración

1. Descubrimiento y auditoría (Semana 1-2)

Auditamos tu instancia Umbraco: versión, Document Types, plantillas, controladores personalizados, volumen de medios, integraciones de terceros, estructura de URL existente. Realizamos un benchmark del rendimiento actual e identificamos páginas críticas para SEO.

2. Decisión de arquitectura (Semana 2)

Basándonos en la auditoría, recomendamos la Opción A u Opción B con una justificación detallada. Definimos el stack de tecnología, la estrategia de hosting y el mapeo del modelo de contenido.

3. Mapeo del modelo de contenido (Semana 2-3)

Cada Document Type se mapea a un componente React (Opción A) o a un modelo de contenido CMS (Opción B). Documentamos esto en una referencia de esquema compartida que tanto desarrolladores como editores de contenido pueden revisar.

4. Construcción del frontend (Semana 3-6)

Las vistas Razor se convierten en componentes React. Construimos el sistema de diseño en una biblioteca de componentes, creamos plantillas de página y conectamos la obtención de datos mediante la Content Delivery API de Umbraco o tu nuevo CMS headless.

5. Migración de contenido (Semana 5-7, solo Opción B)

Los scripts ETL personalizados extraen contenido de la base de datos de Umbraco, lo transforman para que coincida con el nuevo esquema y lo cargan en el CMS de destino. Validamos cada nodo de contenido, relación y activo de medios.

6. Preservación de SEO y lanzamiento (Semana 7-8)

Aquí es donde las migraciones tienen éxito o fracasan. Implementamos un mapa de redirección completo que cubre cada URL. Los mapas del sitio XML se regeneran. Los datos estructurados se trasladan. Verificamos etiquetas canónicas, meta descripciones y datos Open Graph página por página. Las ejecuciones de Screaming Frog se ejecutan antes y después del lanzamiento para detectar brechas.

Para una comparación más profunda de los enfoques Umbraco y Next.js, hemos publicado un desglose técnico detallado.

Estrategia de preservación de SEO

SEO es una preocupación de primera clase durante toda la migración, no algo que añadamos al final:

• Mapeo de redirección 301 completo desde cada URL de Umbraco a su equivalente en Next.js
• Preservación de la estructura de enlaces internos — sin páginas huérfanas
• Migración de metadatos — títulos de página, descripciones, imágenes OG trasladadas mediante programación
• Datos estructurados trasladados y validados contra Google Rich Results Test
• Ganancias de rendimiento que mejoran directamente las clasificaciones de Core Web Vitals
• Monitoreo post-lanzamiento con Search Console y Ahrefs durante 90 días

Cronograma e inversión

Una migración típica de Umbraco a Next.js para un sitio de tamaño medio (50-200 páginas) toma 6-10 semanas dependiendo de la complejidad y qué camino de migración elijas.

• Opción A (Umbraco headless + Next.js): £15.000 – £35.000
• Opción B (Migración completa a Sanity/Payload): £20.000 – £50.000

Los sitios más grandes — integraciones complejas, configuraciones multiidioma, comercio electrónico — estarán en el extremo superior. Especificamos cada proyecto con una propuesta de precio fijo después de la fase de descubrimiento. Sin sorpresas a mitad de proyecto.

Por qué trabajar con Social Animal

Somos una agencia con sede en el Reino Unido, así que entendemos el mercado de Umbraco mejor que la mayoría. Hemos trabajado directamente con equipos .NET, migrado codebases Razor y tratado con los quirks específicos de la arquitectura de contenido de Umbraco de primera mano. También construimos aplicaciones Next.js de producción todos los días: es nuestra capacidad principal.

Tu sitio Umbraco te ha servido bien. Asegurémonos de que la próxima plataforma te sirva aún mejor.