Migración Headless de TYPO3 con Next.js o Astro
Tu sitio TYPO3 es lento — incluso cuando los editores hacen todo bien
Why leave TYPO3 (Monolithic)?
- Fluid templating locks your mobile Lighthouse score under 65 no matter how much you optimize images or compress assets
- Hiring TypoScript-fluent developers costs 30–50% more than React generalists and delays every sprint outside DACH markets
- Server-side PHP rendering pushes TTFB past 800ms even with Varnish edge layers running
- Building interactive features requires writing custom Extbase extensions or patching jQuery into legacy templates
- Connecting personalization engines or headless commerce platforms demands custom middleware that breaks during TYPO3 core updates
- Your deployment pipeline stalls every release because testing Fluid changes requires spinning up full TYPO3 environments
What you gain
- Ship Lighthouse mobile scores of 95–100 through static generation and ISR without rewriting your content architecture
- Deliver sub-200ms TTFB to global visitors via Vercel or Cloudflare CDN with zero custom caching config
- Hire from the entire React and JavaScript developer pool instead of hunting for TypoScript specialists
- Your editors log into the same TYPO3 backend, use the same content elements, follow the same workflows—zero retraining friction
- Migrate to Sanity or Payload CMS later without touching your Next.js frontend—the API contract stays identical
- Preview, test, and deploy frontend changes in isolated Vercel branches while your CMS stays untouched in production
Por qué ir Headless con TYPO3?
TYPO3 potencia algunos de los sitios web empresariales más complejos de la región DACH. Tus editores lo conocen. Tus flujos de trabajo dependen de él. Tus procesos de cumplimiento y gobernanza están construidos alrededor de él. Eliminarlo no es realista — y no es necesario.
La extensión TYPO3 Headless (tx_headless) transforma tu instalación TYPO3 existente en una API JSON. Tu contenido se queda exactamente donde está. Tus editores mantienen el backend que han pasado años aprendiendo. ¿Pero el frontend? Eso se convierte en una aplicación Next.js o Astro ultrarrápida que obtiene 95+ en Lighthouse y se carga en menos de un segundo.
Este es el camino de menor riesgo hacia el rendimiento web moderno para empresas que no pueden permitirse tiempo de inactividad, flujos de trabajo rotos o programas de reentrenamiento de seis meses.
El problema con TYPO3 monolítico
La capa de plantillas Fluid/Extbase de TYPO3 fue lo último en tecnología en 2012. En 2026, crea verdaderos cuellos de botella de rendimiento y desarrollo.
Rendimiento frontal lento
Los sitios TYPO3 tradicionales sirven HTML renderizado en servidor a través de PHP. Cada solicitud de página impacta el servidor de aplicaciones, procesa TypoScript, renderiza plantillas Fluid y devuelve markup. Incluso con Varnish delante, TTFB generalmente se sitúa entre 800ms y 2.5 segundos. Core Web Vitals sufre — y Google lo nota.
La contratación de desarrolladores se está volviendo más difícil
Encontrar desarrolladores que realmente entiendan TypoScript, Fluid y Extbase se vuelve más difícil cada año. El grupo de talentos de TYPO3 está concentrado en Alemania, Austria y Suiza — y se está reduciendo a medida que los desarrolladores se mueven a ecosistemas JavaScript. Mantener tu frontend TYPO3 se vuelve cada vez más caro.
Reutilización de componentes limitada
Los parciales y secciones de Fluid ofrecen reutilización básica, pero no pueden competir con arquitecturas de componentes React o Astro. Crear características interactivas — filtrado, búsqueda en tiempo real, formularios dinámicos — significa integraciones incómodas de jQuery o plugins Extbase personalizados que son una pesadilla para mantener a largo plazo.
Techo de rendimiento móvil
El stack frontend tradicional de TYPO3 hace difícil alcanzar los tiempos de interacción inferiores a 100ms que esperan los usuarios modernos. Las puntuaciones Lighthouse móviles para sitios TYPO3 típicos se sitúan entre 40 y 65. Ese no es un problema de estilo — es un problema de arquitectura.
Complejidad de integración
Conectar TYPO3 a servicios modernos — motores de personalización, plataformas de pruebas A/B, APIs de comercio electrónico — significa middleware personalizado o extensiones que quizás no existan aún. Una arquitectura headless abre tu contenido a cualquier frontend, cualquier canal, cualquier integración.
Lo que tx_headless desbloquea
La extensión EXT:headless es mantenida por la comunidad TYPO3 y tiene una verdadera adopción empresarial detrás. Intercepta el pipeline de renderizado de páginas de TYPO3 y genera JSON estructurado en lugar de HTML.
Lo que obtienes
- Árbol de páginas completo como JSON — navegación, elementos de contenido, metadatos, todo expuesto a través de endpoints REST
- Mapeo de elementos de contenido — cada elemento de contenido TYPO3 (texto, imagen, gridelements, DCE, mask) puede mapearse a una estructura JSON
- Soporte de vista previa — los editores aún pueden obtener vista previa de páginas a través del backend de TYPO3 con renderizado correcto del frontend
- Soporte multilingüe — el manejo de idiomas de TYPO3 se traduce directamente a la capa API
- Compatibilidad de Workspace — los flujos de trabajo de borrador/publicado continúan funcionando
Tu instalación TYPO3 se convierte en un CMS headless sin perder una sola característica en la que dependen tus editores.
Nuestro proceso de migración
Hemos refinado un enfoque faseado específicamente para entornos empresariales adversos al riesgo.
Fase 0: Auditoría y diseño de API (1-2 semanas)
Nos adentramos en tu instalación TYPO3 existente — extensiones, elementos de contenido personalizados, configuraciones de TypoScript, configuración de caché, integraciones de terceros. Cada tipo de contenido se asigna a un esquema JSON. Identificamos brechas donde se necesitan endpoints API personalizados.
Entregables: documento de especificación API, mapeo del modelo de contenido, evaluación de riesgos, cronograma del proyecto.
Fase 1: Instalar y configurar tx_headless (1 semana)
Instalamos la extensión headless, configuramos la salida JSON para todos los elementos de contenido, configuramos el enrutamiento API y nos aseguramos de que nada rompa la compatibilidad hacia atrás. Tu frontend existente sigue funcionando — la API funciona junto a él.
Fase 2: Construir el frontend moderno (3-6 semanas)
Usamos Next.js para sitios dinámicos y personalizados o Astro para sitios con contenido pesado, en gran medida estáticos. De cualquier manera, obtienes un frontend impulsado por componentes que consume la API TYPO3.
- Librería de componentes — cada elemento de contenido TYPO3 obtiene un componente frontend moderno
- Generación estática donde sea posible — páginas pre-renderizadas en tiempo de compilación para TTFB inferior a 100ms
- ISR/revalidación bajo demanda — las actualizaciones de contenido se lanzan sin reconstrucciones completas
- Implementación en el Edge — Vercel o Cloudflare para distribución global de CDN
Fase 3: Pruebas, vista previa y cutover (1-2 semanas)
Configuramos el sistema de vista previa de TYPO3 para renderizar a través del nuevo frontend, ejecutamos control de calidad en dispositivos e idiomas, validamos todos los redireccionamientos y URLs canónicas, y realizamos un cutover DNS sin tiempo de inactividad.
Fase 4 (Opcional): Migración de CMS a Sanity o Payload
Una vez que el frontend headless sea estable, tienes una ruta de salida limpia de TYPO3 completamente. Dado que el frontend ya consume una API JSON, cambiar el backend de TYPO3 a Sanity o Payload CMS es una migración de contenido — no una reconstrucción. Este es el juego largo para organizaciones que quieren modernizar completamente pero no pueden justificar hacerlo todo de una vez.
Estrategia de preservación de SEO
Los sitios TYPO3 empresariales a menudo tienen miles de páginas indexadas con años de autoridad acumulada. Protegemos cada URL.
Paridad de URL
Replicamos la estructura de URL de TYPO3 RealURL/route enhancer exactamente. Cada URL existente devuelve el mismo contenido en la misma ruta. Sin redireccionamientos necesarios para páginas estándar.
Mapeo de redireccionamientos
Para cualquier URL que deba cambiar, implementamos redireccionamientos 301 en el edge — middleware de Vercel o Cloudflare Workers, sin viaje de ida y vuelta a un servidor de origen. Exportamos entradas del módulo de redireccionamiento de TYPO3 y las portamos al nuevo stack.
Continuidad de metadatos
Todas las extensiones SEO de TYPO3 (cs_seo, seo basics, campos SEO del núcleo) se asignan a la API JSON y se renderizan como meta tags adecuados, datos Open Graph y datos estructurados en el nuevo frontend.
Sitemaps XML
Generamos sitemaps desde la API TYPO3 en tiempo de compilación, por lo que todas las páginas indexadas permanecen detectables. Las etiquetas Hreflang para sitios multilingües se renderizan correctamente basándose en la configuración de idioma de TYPO3.
Monitoreo
Después del lanzamiento, observamos Google Search Console para errores de rastreo, caídas de indexación y cambios en Core Web Vitals. Garantizamos ninguna pérdida de clasificación atribuible a la migración en sí.
Cronograma y precios
| Alcance | Cronograma | Precio inicial |
|---|---|---|
| Sitio pequeño (< 50 tipos de contenido, idioma único) | 4-6 semanas | €12.000 |
| Empresa mediana (50-150 tipos de contenido, multilingüe) | 6-10 semanas | €25.000 |
| Empresa grande (extensiones personalizadas, flujos de trabajo complejos) | 10-16 semanas | €45.000+ |
La migración de CMS de Fase 4 (TYPO3 → Sanity/Payload) se especifica por separado después de que el frontend headless sea estable.
Cada compromiso comienza con una auditoría de migración gratuita. Revisamos tu instalación TYPO3, identificamos bloqueadores y te damos una propuesta de precio fijo antes de cualquier compromiso.
Por qué Social Animal para TYPO3 Headless
Conocemos ambos lados de esta migración. Hemos trabajado con instalaciones TYPO3 ejecutando extensiones Extbase personalizadas, configuraciones complejas de gridelements y configuraciones multiSitio con pools de contenido compartido. También construimos aplicaciones Next.js y Astro en producción cada semana.
Esa fluidez dual es genuinamente rara. La mayoría de agencias TYPO3 no conocen React. La mayoría de agencias JavaScript nunca han tocado TypoScript. Cerramos esa brecha — con un proceso claro, precios fijos y sin sorpresas.
¿Listo para modernizar sin riesgo? Obtén tu auditoría de migración gratuita o explora nuestras capacidades de desarrollo de CMS headless.
The migration process
Discovery & Audit
We map every page, post, media file, redirect, and plugin. Nothing gets missed.
Architecture Plan
New stack designed for your content structure, SEO requirements, and performance targets.
Staged Migration
Content migrated in batches. Each batch verified before the next begins.
SEO Preservation
301 redirects, canonical tags, sitemap, robots.txt — every ranking signal carried over.
Launch & Monitor
DNS cutover with zero downtime. 30-day monitoring period included.
TYPO3 (Monolithic) vs TYPO3 Headless + Next.js/Astro
| Metric | TYPO3 (Monolithic) | TYPO3 Headless + Next.js/Astro |
|---|---|---|
| Lighthouse Mobile | 40-65 | 95-100 |
| TTFB | 0.8-2.5s | <0.2s |
| Build/Deploy | Cache warmup minutes | ISR <10s revalidation |
| Hosting Cost | €200-800/mo (managed TYPO3) | €20-50/mo (Vercel/CF) + existing TYPO3 |
| Developer Experience | TypoScript/Fluid/Extbase | React/TypeScript/Astro |
| API/Headless | None (monolithic rendering) | Full REST JSON via tx_headless |
Common questions
¿Necesitan nuestros editores aprender un CMS nuevo?
No. Ese es el punto completo de este enfoque. TYPO3 sigue siendo tu backend de contenido — los editores continúan usando la misma interfaz, flujos de trabajo y permisos que ya conocen. La extensión tx_headless funciona de manera transparente en segundo plano. El único cambio visible para los editores es vistas previas de página más rápidas a través del nuevo frontend.
¿Qué es la extensión tx_headless y está lista para producción?
EXT:headless (tx_headless) es una extensión TYPO3 mantenida por la comunidad que convierte la salida de renderizado de página de TYPO3 a JSON estructurado a través de API REST. Soporta TYPO3 v11 y v12, maneja elementos de contenido, navegación y contenido multilingüe. Se está ejecutando en producción en empresas de toda Europa y es activamente mantenida.
¿Seguirán funcionando nuestras extensiones TYPO3 existentes?
Las extensiones del backend — flujos de trabajo, permisos, campos personalizados — funcionan sin cambios. Las extensiones que enfrentan al frontend necesitan mapeo JSON, así que creamos endpoints API personalizados para cualquier cosa que actualmente genere HTML. Durante la fase de auditoría, inventariamos cada extensión e identificamos exactamente cuáles necesitan adaptación.
¿Cómo se maneja la configuración multilingüe de TYPO3?
La configuración de idioma de TYPO3 se traduce directamente a la API headless. Cada variante de idioma se expone como un endpoint JSON separado. Renderizamos etiquetas hreflang, URLs localizadas y selectores de idioma en el nuevo frontend para coincidir exactamente con la estructura de árbol de idioma de TYPO3 actual.
¿Podemos migrar completamente desde TYPO3 más tarde?
Sí — esa es la estrategia de salida de Fase 4. Una vez que tu frontend consume una API JSON, el backend se vuelve intercambiable. Migrar contenido desde TYPO3 a Sanity o Payload CMS es una migración de datos, no una reconstrucción de frontend. Puedes hacerlo meses o años después de ir headless, cuando tenga sentido.
¿Qué sucede con nuestras clasificaciones SEO durante la migración?
Preservamos cada URL, redireccionamiento, etiqueta canónica y pieza de datos estructurados. Las páginas se pre-renderizan como HTML estático con meta tags completos, por lo que los motores de búsqueda ven contenido completo. Monitoreamos Search Console después del lanzamiento y garantizamos ninguna pérdida de clasificación atribuible a la migración en sí.
¿Deberíamos elegir Next.js o Astro para el frontend?
Next.js es la opción correcta para sitios que necesitan autenticación, personalización o interactividad pesada — piensa en portales de clientes o comercio electrónico. Astro funciona mejor para sitios con contenido pesado donde la mayoría de las páginas son estáticas. Te diremos cuál es el que se ajusta durante la auditoría, basándose en lo que realmente estás construyendo.
Ready to migrate?
Free assessment. We'll audit your current site and give you a clear migration plan — no commitment.
Let's build
something together.
Whether it's a migration, a new build, or an SEO challenge — the Social Animal team would love to hear from you.