Datos de producto estructurados significa que cada dato del producto vive en un atributo tipado, con…
Contentful Live Preview: lo que tu frontend tiene que resolver
Con Contentful Live Preview, los editores ven un borrador junto al editor de la entrada y siguen los cambios mientras escriben. Contentful aporta el panel de vista previa, la Content Preview API y el Live Preview SDK, pero la página dentro de ese panel es tu frontend. Que la vista previa sea fiel, rápida y segura depende de cómo ese frontend gestiona borradores, caché, indexación e idiomas.
De qué se compone Contentful Live Preview
Live Preview combina cuatro piezas. Ponerles nombre desde el principio ayuda a tu equipo a dimensionar el trabajo.
- Content preview URLs: en la aplicación web de Contentful defines una URL de vista previa por content type. Apunta a tu web o tu storefront, es decir, a la página que muestra el borrador.
- Content Preview API: los borradores llegan desde una API independiente en preview.contentful.com. Necesita su propio preview access token, los tokens de producción de la Delivery API no sirven ahí y tiene su propio límite de peticiones, que depende de tu plan.
- Panel de vista previa: los editores ven la página junto al editor de la entrada. Según la documentación de Contentful, esta vista lado a lado funciona sin SDK.
- Live Preview SDK: el paquete @contentful/live-preview añade dos funciones avanzadas. El inspector mode permite hacer clic en un elemento de la vista previa y saltar directamente a su campo de origen. Los live updates muestran los cambios sin recargar. El SDK es compatible con JavaScript puro y React, incluido Next.js.
En resumen: Contentful gestiona contenidos y borradores, tu frontend muestra lo que ven los editores.
Lo que tu frontend tiene que resolver
Para que el equipo confíe en la vista previa, el frontend debe cumplir seis tareas. Si todavía estás planificando la conexión con Contentful, nuestros consejos prácticos para conectar Contentful desde el frontend cubren lo básico.
- Mostrar borradores bajo demanda. En modo vista previa, el frontend consulta la Preview API con el preview token en lugar de la Delivery API. El token se queda en el servidor y nunca llega al bundle del navegador.
- Renderizar en servidor sin caché. Una respuesta de vista previa no debe acabar en una CDN, un reverse proxy ni en la caché del framework. Si no, los editores ven borradores desactualizados o tus clientes ven un borrador.
- Mantener las páginas de vista previa fuera de los buscadores. Cada URL de vista previa necesita noindex, nofollow, con independencia de la configuración SEO habitual de la página.
- Etiquetar campos para el inspector mode. Los elementos reciben atributos data como data-contentful-entry-id y data-contentful-field-id, o el helper getProps del SDK. Contentful recomienda etiquetar elementos grandes y entradas referenciadas completas, no cada elemento pequeño ni cada parámetro de estilo. En los planes Premium, las Content Source Maps pueden automatizar parte de este etiquetado.
- Gestionar los idiomas de forma explícita. El SDK se inicializa con un locale, y los live updates no admiten varios locales en una misma consulta GraphQL. La localización de la vista previa, es decir, un selector de idioma en Live Preview y preview tokens personalizados por mercado, está disponible en los planes Premium.
- Permitir la incrustación. La vista previa se ejecuta en un iframe dentro de la aplicación web de Contentful. Tu frontend debe permitirlo mediante una Content-Security-Policy con frame-ancestors para app.contentful.com en lugar de bloquearlo con una cabecera X-Frame-Options, y las cookies necesitan SameSite=None y Secure.
Errores habituales
La vista previa muestra algo distinto a la web en vivo
La causa más frecuente son las referencias. La Preview API resuelve entradas enlazadas que siguen en borrador, mientras que la Delivery API solo devuelve contenido publicado. Un teaser parece completo en la vista previa y desaparece tras publicar. Otras causas típicas son un environment distinto en la URL de vista previa o un fallback de idioma que solo se aplica en un lado.
Rendimiento en la vista previa
La vista previa no usa caché a propósito, así que cada visualización llama a la Preview API y a tu renderizado. En páginas con muchas referencias se nota el límite de peticiones, por eso conviene diseñar consultas de vista previa ligeras.
Campos de diseño en el content model
Para que la vista previa "quede bien", los equipos suelen añadir a los content types campos de colores, espaciados o número de columnas. El modelo crece, las entradas se reutilizan peor entre canales y cada cambio de diseño se convierte en un cambio de contenido. El contenido pertenece a Contentful, las decisiones de diseño a la capa de frontend.
El preview token como secreto compartido
Un preview token da acceso a contenido no publicado. Trátalo como una contraseña de staging, rótalo cuando alguien deje el equipo y actualiza cada URL de vista previa que lo contenga.
Dónde encaja Laioutr
Contentful es la capa de contenido: modelos, entradas, borradores, Preview API y panel de vista previa. Laioutr es la Frontend Management Platform (FMP): el frontend que muestra ese contenido junto con los datos de producto, más el editor con el que tu equipo compone las páginas. Ambos se complementan.
Content Preview en el frontend de Laioutr. Cualquier URL de la storefront abierta con un preview token se renderiza con contenido no publicado. El token es un ajuste de proyecto en Cockpit, separado de otros secretos y rotable por separado, y está pensado para insertarse en las plantillas de URL de vista previa de un CMS, como las content preview URLs de Contentful. El servidor verifica el token, renderiza la página en servidor y la envía con Cache-Control private, no-store. Las cachés de Orchestr se omiten y cualquier token presentado fuerza noindex, nofollow. Un token incorrecto simplemente muestra la página publicada. Un token válido, en cambio, abre todo el contenido no publicado del proyecto, así que compártelo como una contraseña de staging. Un detalle para tu documentación operativa: un token rotado se aplica tras el siguiente despliegue.
Studio como editor visual. Studio, el editor visual de Laioutr, muestra una vista previa en vivo de la storefront mientras tu equipo ordena sections y blocks, cambia de mercado e idioma y revisa las vistas por dispositivo. Su interruptor "Show preview content" envía el mismo preview token, de modo que el contenido no publicado de las fuentes conectadas puede aparecer en el diseño real de la página, siempre que el conector admita la vista previa. Publicar sigue siendo un paso que decide una persona.
La conexión con Contentful lee el contenido a través de la Content Delivery API, con localización y varios environments incluidos. Content Preview da a cada conector una señal de vista previa verificada en servidor; si tu setup de Contentful cambia con ella a la Preview API lo comprobamos juntos en una demo. Para la parte editorial del mismo setup, lee Contentful Visual Editing: la capa de marketing.
Checklist para tu vista previa
- Define una URL de vista previa para cada content type que se renderiza como página propia.
- Guarda el preview token en el servidor y documenta quién tiene acceso.
- Desactiva todas las cachés para las respuestas de vista previa, incluidas las route rules del framework.
- Fuerza noindex, nofollow en cada URL de vista previa.
- Prueba borradores con referencias no publicadas antes del lanzamiento.
- Decide qué elementos llevan etiquetas de inspector y mantén los campos de diseño fuera del content model.
- Prueba la vista previa en cada idioma y cada mercado que publiques.
FAQ
¿Necesito el Live Preview SDK para usar Contentful Live Preview?
No para la vista lado a lado. El SDK es necesario para el inspector mode y los live updates.
¿Por qué mi vista previa muestra contenido que falta en la web en vivo?
Normalmente porque una entrada referenciada sigue en borrador. La Preview API la devuelve, la Delivery API no. Publica primero las referencias o revísalas dentro de tu rutina de publicación.
¿Hay que cachear las páginas de vista previa?
No. El contenido de vista previa cambia constantemente y solo está pensado para editores. Renderízalo en servidor, sírvelo sin caché y márcalo con noindex.
¿Laioutr sustituye a Contentful Live Preview?
No. Contentful sigue siendo tu capa de contenido y su vista previa sigue siendo útil para editar entradas. Laioutr añade el frontend con un modo de vista previa verificado en servidor y sin caché, y Studio para componer las páginas alrededor de ese contenido.
Próximos pasos
¿Quieres ver cómo se ve el contenido de Contentful en una storefront real con Studio? Reserva una demo y trae uno de tus content types. Repasaremos URLs de vista previa, idiomas y caché pensando en tu setup.