Drupal CMS headless
El Drupal headless (desacoplado) utiliza Drupal únicamente como backend de contenido y API, mientras que un frontend de JavaScript independiente, construido con Angular, Next.js, React o Vue/Nuxt, gestiona la capa de presentación y consume contenido mediante JSON:API, GraphQL o REST. Metadrop diseña y construye toda la pila desacoplada, el backend de Drupal más un frontend moderno, o entrega la capa de API de Drupal junto con el equipo de frontend interno existente.
Habla con un arquitecto Drupal desacoplado
Tres modelos de arquitectura Drupal desacoplada
Drupal totalmente desacoplado
En una arquitectura totalmente desacoplada, Drupal sirve contenido exclusivamente como API, y un frontend JavaScript independiente (Angular, Next.js, React o Vue/Nuxt) renderiza todo el HTML y gestiona el enrutamiento, el SEO y la experiencia de usuario. Este modelo es el más adecuado cuando se necesita máximo rendimiento del frontend, un equipo de frontend independiente, interactividad de nivel de aplicación o una única fuente de contenido que alimente múltiples canales como web, móvil y señalética digital.
La desventaja es que se pierde la edición en el lugar y el Diseñador de diseños / vista previa de Drupal Canvas a menos que se diseñe un flujo de vista previa. Metadrop construye esas integraciones de vista previa para que los editores conserven sus flujos de trabajo.
html
Drupal progresivamente desacoplado
Con una arquitectura progresivamente desacoplada, Drupal renderiza la página y la experiencia de administración y edición de Drupal se mantiene intacta, mientras que componentes interactivos específicos se desacoplan y se integran dentro de la página, por ejemplo, un widget de React o Vue. Este modelo es el más adecuado cuando los editores necesitan conservar el Layout Builder / lienzo de Drupal, la edición en contexto y el flujo de trabajo de contenido de Drupal, pero algunas áreas del sitio requieren una interactividad JavaScript enriquecida.
La contrapartida es que la libertad del frontend está limitada por el ciclo de vida de la página de Drupal, por lo que el enfoque no es adecuado para un modelo completamente similar a una aplicación o de entrega multicanal.
Drupal híbrido desacoplado
Una arquitectura híbrida combina un frontend completamente desacoplado para secciones de alto tráfico o multicanal con el renderizado tradicional de Drupal para páginas editorialmente complejas, todo servido desde un único backend de Drupal. Es la opción más adecuada cuando una organización necesita rendimiento desacoplado para superficies de marketing y producto, manteniendo una edición rápida y de baja sobrecarga para áreas con mucho contenido.
Los Componentes de Directorio Único (SDC, disponibles en Drupal 10.1+) ofrecen un modelo de componentes intermedio que reduce la brecha entre el renderizado acoplado y desacoplado.
Comparación: completamente desacoplado vs. progresivamente desacoplado vs. híbrido
| Completamente desacoplado | Progresivamente desacoplado | Híbrido | |
|---|---|---|---|
| Quién renderiza el HTML | Frontend JavaScript | Drupal | Mixto según la superficie |
| Experiencia de edición / edición en contexto | No disponible por defecto | Se conserva | Parcial |
| Soporte de Layout Builder | No disponible | Se mantiene | Se mantiene donde renderiza Drupal |
| Límite de rendimiento | El más alto | Moderado | Por superficie |
| Alcance multicanal | Completo (web + app + señalización) | Solo web | Web más canales seleccionados |
| Habilidades de frontend necesarias | Equipo JavaScript dedicado | Equipo Drupal más algo de JS | Equipo con habilidades mixtas |
| SEO y enrutamiento | El frontend gestiona SEO y enrutamiento | Drupal gestiona SEO y enrutamiento | Responsabilidad compartida |
| Escenario más adecuado | Omnicanal, alto rendimiento, equipo frontend separado | Sitio dirigido por editores que necesita cierta interactividad enriquecida | Necesidades mixtas entre superficies |
Cuándo elegir una arquitectura Drupal desacoplada, y cuándo no
Cuándo es la opción correcta el Drupal desacoplado
- Publicación omnicanal: un repositorio de contenido Drupal alimenta un sitio web, aplicaciones móviles nativas, quioscos y señalización digital desde los mismos endpoints JSON:API y GraphQL.
- Core Web Vitals y rendimiento: un frontend de Next.js o Nuxt con generación estática o renderizado en el borde alcanza los objetivos de LCP e interacción que un tema acoplado no puede.
- Un equipo frontend dedicado o interno que quiera trabajar en React o Next.js de forma independiente al ciclo de lanzamiento de Drupal.
- Organizaciones centradas en el sistema de diseño que estandarizan una biblioteca de componentes compartida entre múltiples frontends.
- Entrega multilingüe y multirregional a escala: Metadrop admite más de 30 idiomas en más de 50 países y sortea las limitaciones de traducción de JSON:API.
Cuándo no merece la pena una arquitectura desacoplada
- Un sitio de contenido o marketing estándar con un canal web y sin aplicación: el Drupal tradicional es más rápido y económico de construir y mantener.
- Equipos que dependen en gran medida de la edición en línea y la vista previa de Layout Builder y no tienen interés en un flujo de vista previa.
- Presupuestos reducidos o plazos cortos: el desacoplamiento aumenta el tamaño mínimo del equipo y el coste, porque el backend y el frontend se construyen y mantienen por separado.
¿No estás seguro de si decoupled es adecuado para ti? Programa una revisión de arquitectura
Servicios de desarrollo Drupal headless disponibles
- Diseño de arquitectura y evaluación de preparación desacoplada: modelado de contenidos, elección del modelo (completo, progresivo o híbrido), selección de la capa API (JSON:API, GraphQL, REST) y diseño de autenticación (OAuth2/JWT).
- Creación del backend Drupal y la API: modelado de contenido estructurado con Paragraphs, configuración de JSON:API y GraphQL, rendimiento y almacenamiento en caché (Redis, Memcached) y estrategia edge/CDN.
- Desarrollo del frontend: aplicaciones Next.js, React y Vue/Nuxt, incluyendo SSR/SSG, enrutamiento, integración de vista previa y el kit de herramientas next-drupal.
- Integración con el equipo de frontend existente: Metadrop entrega y documenta la capa de API de Drupal para que los desarrolladores internos de React o Next.js puedan trabajar con ella.
- Alojamiento y operaciones: el backend de Drupal en Acquia, Platform.sh o Upsun, el frontend en Vercel o Netlify, con SLA definidos, supervisión proactiva y mantenimiento a largo plazo.
Gestiona ambos extremos o intégrese junto al equipo de frontend existente
- Entrega full-stack: Metadrop diseña, construye y mantiene tanto el backend de Drupal como el frontend de JavaScript como un único socio responsable.
- Entrega solo de backend: Metadrop construye y gestiona la API de contenido de Drupal y entrega un contrato documentado y estable al equipo de frontend.
- Ampliación del equipo: los ingenieros de Metadrop se unen a un equipo interno existente de React o Next.js para aportar experiencia en Drupal y sistemas desacoplados sin asumir el frontend.
- Gobernanza técnica independiente: Metadrop actúa como socio estratégico de arquitectura, no solo como proveedor de ejecución, un requisito recurrente en las RFPs empresariales.
Ya confían en nosotros
Tiro con Arco Mundial: Resultados Olímpicos en Vivo a Gran Escala
El sitio oficial de Tiro con Arco Mundial funciona con un backend headless en Drupal que impulsa un frontend en Angular donde se muestran atletas, competiciones, clasificaciones y resultados en vivo flecha por flecha. Durante los Juegos Olímpicos, la plataforma gestionó el tráfico máximo sin fallos; un referente en la entrega deportiva en tiempo real.
Photo by Annie Spratt on Unsplash
Schär: comercio electrónico sin fisuras en un sitio Drupal desacoplado
Para el lanzamiento en el mercado estadounidense de la marca de alimentos sin gluten Schär, Metadrop integró una tienda externa en un sitio basado en Drupal sin sacrificar la experiencia editorial. Los productos, descuentos y el carrito de compras se muestran de forma nativa en Drupal, mientras que el motor de comercio real funciona externamente, ofreciendo al usuario una experiencia unificada sin ningún tipo de separación visible.
Drupal desacoplado con Next.js, React y Vue: frameworks frontend y capas de API
- Next.js: el framework React recomendado como principal para Drupal desacoplado, combinado con el kit next-drupal para enrutamiento, previsualización y regeneración estática incremental.
- React: frontends basados en componentes para interfaces tipo aplicación y sistemas de diseño, consumiendo Drupal a través de JSON:API o GraphQL.
- Vue / Nuxt: la pila tecnológica detrás del desarrollo desacoplado de Nespresso de Metadrop; Nuxt añade SSR/SSG para SEO y rendimiento.
- Gatsby y generación estática: renderizado en tiempo de compilación para contenido que cambia con poca frecuencia y que debe servirse desde el borde de la red.
- Capas de API: JSON:API (en Drupal core desde la versión 8.5), GraphQL y REST, con OAuth2/JWT para contenido autenticado y experiencias personalizadas. Consulta el servicio de APIs para obtener detalles a nivel de endpoint.
- Diseñado para ser consumido por IA: los mismos endpoints JSON:API que alimentan un frontend pueden servir a asistentes de IA y pipelines RAG, alineando un sitio Drupal desacoplado con el trabajo de IA y automatización de Metadrop.
html
Migrando de Drupal monolítico a una arquitectura desacoplada
- Evaluación de preparación: Metadrop audita el modelo de contenido, las integraciones y los flujos de trabajo editoriales del sitio Drupal monolítico existente antes de comenzar cualquier desacoplamiento.
- Modelado de contenido para una API: se reestructuran campos, entidades y párrafos para que el contenido sea direccionable de forma limpia a través de JSON:API y GraphQL en lugar de estar vinculado a plantillas de temas.
- Migración incremental: se despliega la capa API y un nuevo frontend en paralelo con el sitio en vivo, y luego se realiza el cambio sección por sección para limitar el riesgo.
- Continuidad de la experiencia del editor: se diseñan canalizaciones de vista previa para que los equipos de contenido mantengan una vista previa funcional después de desacoplar el frontend.
- Coordinado con la migración de Drupal: la migración de sitios Drupal existentes, incluidas las actualizaciones de versión, se gestiona en coordinación con el servicio de migración de Drupal de Metadrop.
Seguridad, cumplimiento normativo y accesibilidad para arquitecturas Drupal desacopladas
- Una arquitectura dividida introduce nuevas superficies de seguridad: autenticación API, gestión de tokens (OAuth2/JWT), CORS y el flujo de datos entre el backend y el frontend, que Metadrop diseña y refuerza de forma explícita.
- RGPD y residencia de datos: el alojamiento del backend y del frontend y los flujos de datos se configuran para cumplir con los requisitos de protección de datos y residencia de la UE.
- Accesibilidad WCAG 2.1 AA: los frontends JavaScript desacoplados se construyen y auditan para garantizar la accesibilidad, algo que un frontend personalizado podría poner en riesgo.
- Preparación para NIS2 y certificación ENS: Metadrop está certificado ENS y tiene experiencia con las obligaciones de NIS2, credenciales que la contratación pública y empresarial de la UE exige con frecuencia.
- Estabilidad a largo plazo: SLA definidos, monitorización proactiva y mantenimiento tanto del backend de Drupal como de la aplicación frontend.
Drupal Desacoplado: Preguntas Frecuentes
¿Qué es Drupal sin interfaz (desacoplado)?
Drupal sin interfaz o desacoplado utiliza Drupal como backend de contenido y API, mientras que un frontend JavaScript independiente se encarga de la presentación, consumiendo contenido a través de JSON:API, GraphQL o REST. «Desacoplado» es el término que prefiere la comunidad de Drupal, mientras que «sin interfaz» es el término más general en la industria.
¿Cuál es la diferencia entre Drupal totalmente desacoplado y progresivamente desacoplado?
Completamente desacoplado significa que un frontend JavaScript independiente renderiza todo el HTML y Drupal solo sirve datos. Progresivamente desacoplado mantiene a Drupal renderizando la página y la experiencia del editor, mientras incrusta componentes JavaScript interactivos específicos dentro de la página.
¿Cuándo debería elegir una arquitectura Drupal desacoplada y cuándo no?
Elige el modo desacoplado para la entrega omnicanal, objetivos exigentes de Core Web Vitals, un equipo frontend dedicado o un sistema de diseño compartido. Mantente acoplado para un sitio de contenido de un solo canal, una gran dependencia de la edición en el lugar, o presupuestos y plazos ajustados.¿Qué framework frontend funciona mejor con Drupal headless?
Next.js es la opción más común para Drupal desacoplado basado en React (con el kit de herramientas next-drupal), React se adapta a interfaces tipo aplicación, y Vue/Nuxt es una opción sólida de SSR/SSG. Metadrop funciona con las tres.¿Es Drupal sin interfaz gráfica más difícil para los editores de contenido y los profesionales del marketing?
El desacoplamiento puede eliminar por defecto la edición en el lugar y la vista previa en vivo, pero los ingenieros de Metadrop analizan los flujos de vista previa y, cuando resulta útil, un modelo progresivamente desacoplado o híbrido, para que los editores conserven una vista previa funcional y un flujo de trabajo familiar.
¿Puedo migrar mi sitio Drupal monolítico existente a una arquitectura desacoplada?
Sí. Metadrop realiza una evaluación de preparación, reestructura el contenido para una API y realiza la migración de forma progresiva para limitar los riesgos.
Sí, Metadrop puede trabajar con vuestro equipo frontend interno, o bien construye ambos extremos.
Ambos. Metadrop ofrece construcciones desacopladas full-stack, proporciona una capa de API de Drupal documentada para que el equipo frontend desarrolle, o complementa al equipo interno de React o Next.js con experiencia en Drupal.
Habla con un arquitecto Drupal desacoplado
Recibe una recomendación técnica sobre el modelo desacoplado adecuado, el stack de frontend y la ruta de migración para tu plataforma de un Socio Certificado de Drupal.