He pasado los últimos dos años migrando instalaciones empresariales de TYPO3 a arquitecturas headless. ¿Y sabes qué pregunta surge constantemente? ¿Deberíamos mantener TYPO3 e ir headless con EXT:headless o abandonarlo por Next.js con algo como Supabase? Es un poco desconcertante, ¿verdad? Como la mayoría de decisiones arquitectónicas, la respuesta se reduce a, "depende". Pero desglosemos exactamente de qué depende.

Esto no es académico para mí. He lanzado sitios de producción con ambos enfoques, he sudado a través de esos casos extremos molestos, y he visto a equipos triunfar o luchar—a veces espectacularmente—con cada stack. Hablemos sobre lo que he aprendido en el camino.

Entendiendo los Dos Enfoques

Primero lo primero, ¿qué estamos comparando aquí? Estos dos son bestias completamente diferentes.

TYPO3 + EXT:headless (Desacoplado)

Con esto, TYPO3 sigue siendo tu CMS, manejando todas tus tareas de backend de gestión de contenidos. El giro es que intercambias el renderizado antiguo de Fluid/TypoScript por una API JSON. ¿Tu flamante nuevo frontend? Podría ser React, Vue, lo que prefieras, consumiendo esa API. TYPO3 sigue gestionando todas las cosas buenas como modelos, permisos y flujos de trabajo.

¿La extensión EXT:headless? Ese es el pase VIP detrás de escenas que accede al proceso de renderizado de TYPO3 y produce JSON en lugar de HTML. No es una API complementaria—es el verdadero trato funcionando directamente con las tripas del contenido de TYPO3.

Next.js + Supabase (Completamente Headless)

Por el otro lado, tienes Next.js gestionando tu frontend y lógica del lado del servidor. Supabase (una combinación salvaje de PostgreSQL, autenticación, almacenamiento de archivos y cosas en tiempo real) organiza tu backend. Nada de TYPO3 aquí, amigos. Estás abandonando el viejo CMS por flexibilidad pura y una configuración moderna nativa de JS.

Cómo Funciona Realmente EXT:headless

Cuando aplicas ext:headless a TYPO3, registra un nuevo tipo de página que lo cambia todo. No más pasar contenido a través de plantillas de Fluid; en su lugar, genera JSON.

Aquí hay un vistazo a lo que obtendrás:

{
  "id": 42,
  "type": "textmedia",
  "content": {
    "header": "Welcome to our site",
    "headerLayout": 2,
    "bodytext": "<p>Some rich text content here</p>",
    "media": [
      {
        "publicUrl": "/fileadmin/images/hero.webp",
        "properties": {
          "width": 1920,
          "height": 1080,
          "alt": "Hero image"
        }
      }
    ]
  },
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceAfter": "medium"
  }
}

El frontend luego conecta estos puntos a componentes de React/Vue. Si has jugado con algún CMS basado en componentes, esto se sentirá como tu suéter viejo favorito.

Configurando EXT:headless

Una configuración típica comienza así:

composer require friendsoftypo3/headless

Y en tu TypoScript:

plugin.tx_headless {
  settings {
    debug = 0
  }
}

page = PAGE
page {
  typeNum = 0
  10 = USER
  10.userFunc = FriendsOfTYPO3\Headless\ContentObject\JsonContentObject->render
}

Aquí está lo importante: Para cada elemento de contenido personalizado en TYPO3, necesitas serializadores JSON. Para un sitio con, digamos, un puñado de elementos personalizados, estás viendo un par de días de trabajo. ¿Una configuración empresarial masiva con decenas de elementos? Prepárate—esto podría llevar semanas.

Lo que TYPO3 Headless Hace Bien

  • La experiencia del editor permanece intacta. El familiar backend de TYPO3 significa sin necesidad de reentrenamiento para editores de contenido.
  • Preservar contenido existente. Tus configuraciones no desaparecen. Todo tu contenido, traducciones y medios, ¿siguen ahí?
  • El soporte multiidioma es excelente. TYPO3 tiene uno de los mejores manejos de idiomas que he visto.
  • Características listas para empresas. Desde espacios de trabajo hasta publicación programada, todo está listo para usar.

La Trampa con EXT:headless

  • TYPO3 no va a desaparecer. Necesitarás personas que entiendan PHP y TYPO3, y no están exactamente en todas partes.
  • Hospedaje complejo. Estás haciendo malabarismos con PHP (TYPO3) y Node.js (tu frontend). El doble de diversión, el doble de complejidad.
  • Interfaz API limitada. Es JSON, no GraphQL. La personalización significa volver a bucear en el desarrollo de extensiones de TYPO3.
  • Dolor de vista previa. ¿Integrar una vista previa en tiempo real con TYPO3 y Next.js? No es para los de corazón débil.

TYPO3 Modo Headless vs Next.js + Supabase: Una Comparación Real

Next.js + Supabase: El Stack Completamente Headless

El Diseño

Con esta configuración, Next.js se encarga de tu capa de aplicación, y Supabase interviene para todas las tareas de base de datos y backend.

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│   Next.js   │────▶│   Supabase   │────▶│ PostgreSQL  │
│  (App Router)│     │   (BaaS)     │     │  (Database)  │
└─────────────┘     └──────────────┘     └─────────────┘

Gestión de Contenidos Sin TYPO3

Aquí es donde las cosas se ponen complicadas. ¿Cómo gestionan los editores el contenido?

  1. Panel de administración personalizado. Es más trabajo de lo que crees.
  2. Supabase Studio. Excelente para desarrolladores, los editores podrían odiarlo.
  3. Agregar un CMS. Ahora gestionando tres servicios.
  4. Usar Payload con su propia base de datos. Bastante elegante en mi opinión.

Solo para que veas, aquí hay una implementación básica de obtención de contenido con Supabase:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function getPage(slug: string) {
  const { data, error } = await supabase
    .from('pages')
    .select(`
      id,
      title,
      slug,
      meta_description,
      content_blocks (
        id,
        type,
        content,
        sort_order
      )
    `)
    .eq('slug', slug)
    .eq('status', 'published')
    .single()

  if (error) throw error
  return data
}

En Qué Brilla Next.js + Supabase

  • Rendimiento de las nubes. Generación estática, ISR, renderizado en el borde—tu patio de juegos para velocidad.
  • Montones de desarrolladores. Los chicos de JavaScript/TypeScript están en todas partes.
  • Row Level Security de Supabase. Seriamente genial para cuando quieres control estricto.
  • Características en tiempo real. Integra actualizaciones en vivo como una brisa.
  • Implementación fácil. Usa Vercel para Next.js y Supabase Cloud para backend o auto-hospedaje si lo necesitas.

Las Luchas Aquí

  • CMS de bricolaje. A menos que agregues otro CMS headless a la mezcla, básicamente estás construyendo el tuyo.
  • Agujero negro editorial. No hay flujos de trabajo integrados. Estados de borrador, publicación programada, ¿tienes que hacerlos suceder?
  • Gestión de idiomas. ¿Soporte de contenido multiidioma? Sudarás construyendo eso internamente.
  • Problemas de gestión de medios. El almacenamiento de Supabase no está diseñado para activos digitales. Ten eso en cuenta.

Comparación Cara a Cara

Mira cómo se apilan:

Característica TYPO3 + EXT:headless Next.js + Supabase
UX de edición Excelente CMS personalizado o agregado
Multiidioma Nativo Implementación de bricolaje
Flujos de trabajo Integrado Construcción personalizada necesaria
Rendimiento Bueno Excelente
API Limitada Control total
Tiempo real Ausente Soportado
Autenticación Heredado Moderno y flexible
Complejidad Alta Media
Grupo de talento Escaso Abundante
Migración de contenido Innecesaria Migración completa
Características Integradas Construir o comprar
Tiempo de configuración 2-4 semanas 4-8 semanas
Costo (hospedaje) €150-500 €45-200

Puntos de Referencia de Rendimiento

Veamos algunos números de un sitio que he probado—sitio corporativo, 200 páginas, soporte multilingüe:

Métrica TYPO3 Headless + Next.js Next.js + Supabase (SSG)
TTFB (sin caché) 280ms 45ms
TTFB (caché de CDN) 35ms 32ms
LCP 1.8s 1.2s
CLS 0.02 0.01
Puntuación de Lighthouse 92 98
Tiempo de construcción (completo) 4m 20s 1m 45s
Respuesta API (p95) 180ms 22ms

Línea de fondo, mientras que TTFB sin caché es mejor con Supabase, el caché de CDN prácticamente iguala el campo. Ambos, cuando se configuran correctamente, van lo suficientemente rápido para el usuario final.

TYPO3 Modo Headless vs Next.js + Supabase: Una Comparación Real - arquitectura

Experiencia del Desarrollador y Consideraciones del Equipo

Buceando en TYPO3

Seguirás necesitando profesionales de TYPO3 para proyectos headless. Piensa en serializadores PHP, pruebas de actualizaciones y manejo de problemas de compatibilidad. En 2025, estos expertos podrían costarte €80-120/hora. Y algunos desarrolladores no están entusiasmados con configuraciones headless—le quita la alegría al templado de Fluid.

El Club de Next.js + Supabase

Los desarrolladores de JavaScript son abundantes, pero recuerda que diseñar sistemas de gestión de contenidos no es fácil para todos. La experiencia de desarrollador de Supabase es bastante elegante: tipos de TypeScript generados automáticamente, suscripciones en tiempo real y ayudantes de autenticación sólidos. Pero toda el modelado de datos y decisiones arquitectónicas, ¿eso depende totalmente de ti?

¿Contemplando esta ruta? Nuestro equipo ha perfeccionado la experiencia en desarrollo de Next.js para ayudarte a evitar sorpresas desagradables.

Estrategias de Migración

De TYPO3 Tradicional a TYPO3 Headless

Menor riesgo, el contenido permanece intacto. Principalmente una reescritura del frontend.

  1. Implementa EXT:headless
  2. Mapea elementos de contenido a JSON
  3. Crea el frontend de Next.js/Nuxt
  4. Organiza la integración de vista previa
  5. ¡Ve en vivo!

Marco de tiempo: 8-16 semanas para un sitio corporativo de tamaño decente.

De TYPO3 a Next.js + Supabase

Aguanta tu sombrero, este es una reconstrucción completa.

  1. Audita configuraciones de contenido actuales
  2. Esboza tu esquema de PostgreSQL
  3. Escribe scripts de migración
  4. Mueve referencias de medios y archivos
  5. Construye herramientas editoriales o integra otro CMS
  6. Construye de nuevo para el frontend
  7. Lidia con redirecciones de URL
  8. Propaga contenido multiidioma

Marco de tiempo: 16-32 semanas. ¿Desarrollo headless complejo? Trae profesionales para hacer la vida más fácil.

Análisis de Costos

Tabulemos para una configuración corporativa de tamaño medio: 200 páginas, 3 idiomas, 5 editores, 50K visitantes mensuales.

TYPO3 Headless — Costos del Año 1

Elemento Costo
Hospedaje TYPO3 (Administrado) €3,600/año
Hospedaje Next.js (Vercel Pro) €240/año
Desarrollo Frontend €25,000-45,000
Integración de EXT:headless €8,000-15,000
Total Año 1 €36,840-63,840
Anual Continuo €5,000-8,000

Next.js + Supabase — Costos del Año 1

Elemento Costo
Supabase Pro €300/año
Vercel Pro €240/año
Agregar CMS (si es necesario) €0-3,600/año
Migración de Contenido €10,000-20,000
Desarrollo Frontend + Backend €40,000-70,000
Herramientas Editoriales €10,000-25,000
Total Año 1 €60,540-119,140
Anual Continuo €2,000-6,000

Ir completamente headless cuesta mucho por adelantado, pero reduce los gastos mensuales ya que abandonas el hospedaje de TYPO3. Solo no subestimes la construcción de CMS adicional encima.

Cuándo Elegir Cuál

TYPO3 + EXT:headless

  • Mantén contenido heredado y flujos de trabajo establecidos.
  • Conserva configuraciones editoriales familiares y características ricas.
  • Benefíciate del soporte multiidioma nativo sofisticado.
  • Retén desarrolladores de TYPO3.

Next.js + Supabase

  • Cuando empiezas desde cero.
  • La aplicación necesita muchas características interactivas.
  • Tu equipo de desarrollo ya está enfocado en JavaScript.
  • Mantener el rendimiento de primer nivel es un enfoque clave.
  • Cómodo agregando un CMS headless.

Considera un Tercer Ángulo

¿Tal vez mezclar se te pasó por la mente? Next.js, un CMS headless, más Supabase para datos de aplicación pueden combinar lo mejor. Ofrece herramientas editoriales bien redondeadas sin el bagaje de TYPO3. Si también estás considerando opciones como desarrollo de Astro para sitios ligeros con muchos contenidos, eso vale la pena mirar.

¿Quieres hablar sobre tus necesidades específicas? Estamos aquí para ayudarte a evaluar qué tiene sentido para tu escenario único—contáctanos, y promete una evaluación honesta, incluso si es "quédate con lo que conoces".

Preguntas Frecuentes

¿Es EXT:headless de TYPO3 listo para producción en 2025? Sí, absolutamente. EXT:headless ha sido estable desde la versión 3.x y tiene soporte activo. La versión 4.x cubre TYPO3 v12 y v13 con serialización de contenido sólida, generación de menús y manejo de formularios. Un montón de sitios empresariales enormes lo ejecutan en configuraciones de producción, incluyendo sectores como gobierno y banca en Alemania y Austria.

¿Puedo usar Next.js para un frontend TYPO3 headless? Por supuesto, es un combo clásico. Utilizarás Next.js App Router con componentes del servidor para reunir información de la API JSON de TYPO3. La integración de vista previa es la parte más complicada: configurar el modo de borrador y dirigir TYPO3 para llamarlo a través de URLs de vista previa. Afortunadamente, la documentación útil de la comunidad te guía a través del emparejamiento de Next.js.

¿Cómo se compara Supabase con la configuración de base de datos de TYPO3? Oh, estas son manzanas y naranjas. TYPO3 se ejecuta en Doctrine DBAL con un esquema más estricto gestionado por TCA. Supabase da esa dulce libertad de PostgreSQL con Row Level Security. Supabase proporciona una capacidad de consulta flexible y poderosa, pero TYPO3 está cuidadosamente estructurado para prevenir errores que los editores podrían introducir accidentalmente. Se trata todo de control versus seguridad.

¿Preocupaciones de SEO con TYPO3 headless? ¿Manejo de etiquetas meta y datos estructurados? EXT:headless serializa propiedades de página como etiquetas meta y datos de Open Graph. Tu frontend necesita renderizarlos como etiquetas HTML. Usa la API de Metadatos de Next.js en diseños. Siempre que tu configuración de TYPO3 sea sólida, los datos de SEO deberían seguir el ejemplo. Integra extensiones como EXT:yoast_seo y funcionará bien con configuraciones headless.

¿Está Supabase a la altura de la entrega de contenido de nivel empresarial? Claro que sí. Supabase Cloud, ejecutándose en AWS, ofrece 99.9% de tiempo de actividad en planes Pro y aumenta a 99.95% en planes de Equipo (verifica las tasas de 2025). Para caché de CDN (Edge Network de Vercel, Cloudflare), Supabase principalmente asegura confiabilidad de escritura y características en tiempo real. Para uso empresarial crítico, auto-hospeda Supabase para control máximo.

¿Cómo abordamos el procesamiento de imágenes sin TYPO3? TYPO3 procesa imágenes de forma nativa—recorte, cambio de tamaño, cambio de formato. Sin él, configura tu flujo de trabajo de imagen. Los mejores contendientes de 2025 son: Optimización de Imágenes de Next.js (integrada, favorable a Vercel), Cloudinary (comenzando gratis, el uso serio exige planes pagos), o imgix (comenzando en $100+/mes). El Almacenamiento de Supabase maneja originales pero no transformaciones.

¿Podemos migrar incrementalmente de TYPO3 Headless a completamente headless? Absolutamente, piénsalo como un plan suave. Comienza con TYPO3 headless, aislando tu frontend. Transiciona lentamente contenido de TYPO3 a Supabase o tu CMS elegido—comienza con tipos más simples. Durante la fase, tu frontend de Next.js opera con datos de ambas fuentes.

¿Cuál es la curva de aprendizaje para un equipo de TYPO3 transitando a Next.js + Supabase? Un ramp-up realista es aproximadamente de tres a seis meses. Dicho esto, el desafío no es JavaScript o TypeScript—es el cambio de paradigma. Los desarrolladores de TYPO3 están acostumbrados al framework dirigiendo estructuras de contenido, caché y rutas. En el modelo Next.js + Supabase, esas llamadas son tuyas. Es liberador pero abrumador al principio. La programación en parejas con profesionales de Next.js experimentados hace este salto mucho más suave.