Des données produit structurées, c'est une information produit rangée dans un attribut typé, ave…
Contentful Live Preview : ce que votre frontend doit assurer
Avec Contentful Live Preview, vos rédacteurs voient un brouillon juste à côté de l'éditeur d'entrée et suivent leurs modifications au fil de la saisie. Contentful fournit le panneau de prévisualisation, la Content Preview API et le Live Preview SDK, mais la page affichée dans ce panneau, c'est votre frontend. La fiabilité, la rapidité et la sécurité de la prévisualisation dépendent donc de la façon dont ce frontend gère les brouillons, le cache, l'indexation et les langues.
Les composants de Contentful Live Preview
Live Preview repose sur quatre briques. Les nommer tôt aide votre équipe à cadrer le travail.
- Content preview URLs : dans l'application web Contentful, vous définissez une URL de prévisualisation par content type. Elle pointe vers votre site ou votre storefront, c'est-à-dire la page qui affiche le brouillon.
- Content Preview API : les brouillons proviennent d'une API distincte, sur preview.contentful.com. Elle exige son propre preview access token, les tokens de production de la Delivery API n'y fonctionnent pas, et elle a sa propre limite de requêtes, qui dépend de votre offre.
- Panneau de prévisualisation : les rédacteurs voient la page à côté de l'éditeur d'entrée. Selon la documentation Contentful, cet affichage côte à côte fonctionne sans SDK.
- Live Preview SDK : le paquet @contentful/live-preview ajoute deux fonctions avancées. L'inspector mode permet de cliquer sur un élément de la prévisualisation pour accéder directement au champ source. Les live updates affichent les modifications sans rechargement. Le SDK prend en charge JavaScript natif et React, y compris Next.js.
En résumé : Contentful gère les contenus et les brouillons, votre frontend affiche ce que voient les rédacteurs.
Ce que votre frontend doit assurer
Pour une prévisualisation fiable, le frontend doit remplir six missions. Si vous planifiez encore la connexion à Contentful elle-même, nos conseils pratiques pour connecter Contentful côté frontend posent les bases.
- Afficher les brouillons à la demande. En mode prévisualisation, le frontend interroge la Preview API avec le preview token au lieu de la Delivery API. Le token reste sur le serveur et n'arrive jamais dans le bundle du navigateur.
- Rendre côté serveur, sans cache. Une réponse de prévisualisation ne doit finir ni dans un CDN, ni dans un reverse proxy, ni dans le cache du framework. Sinon, les rédacteurs voient des brouillons périmés, ou vos clients voient un brouillon.
- Tenir les pages de prévisualisation hors des moteurs de recherche. Chaque URL de prévisualisation doit porter noindex, nofollow, quels que soient les réglages SEO habituels de la page.
- Baliser les champs pour l'inspector mode. Les éléments reçoivent des attributs data comme data-contentful-entry-id et data-contentful-field-id, ou le helper getProps du SDK. Contentful recommande de baliser les grands éléments et les entrées référencées entières, plutôt que chaque petit élément ou paramètre de style. Avec les offres Premium, les Content Source Maps peuvent automatiser une partie de ce balisage.
- Gérer les langues explicitement. Le SDK s'initialise avec une locale, et les live updates ne prennent pas en charge plusieurs locales dans une même requête GraphQL. La localisation de la prévisualisation, c'est-à-dire un sélecteur de langue dans Live Preview et des preview tokens personnalisés par marché, est réservée aux offres Premium.
- Autoriser l'intégration en iframe. La prévisualisation s'affiche dans une iframe de l'application web Contentful. Votre frontend doit l'autoriser via une Content-Security-Policy avec frame-ancestors pour app.contentful.com au lieu de la bloquer par un en-tête X-Frame-Options, et les cookies doivent porter SameSite=None et Secure.
Les pièges fréquents
La prévisualisation diffère de la page en ligne
La cause la plus courante, ce sont les références. La Preview API résout les entrées liées encore à l'état de brouillon, alors que la Delivery API ne renvoie que les contenus publiés. Un teaser paraît complet en prévisualisation et disparaît après publication. Autres causes typiques : un autre environment dans l'URL de prévisualisation, ou un fallback de langue qui ne s'applique que d'un côté.
Performance en prévisualisation
La prévisualisation est volontairement sans cache : chaque affichage sollicite la Preview API et votre rendu. Sur les pages riches en références, la limite de requêtes se fait sentir, prévoyez donc des requêtes de prévisualisation légères.
Des champs de mise en page dans le content model
Pour que la prévisualisation « rende bien », les équipes ajoutent souvent des champs de couleurs, d'espacements ou de nombre de colonnes aux content types. Le modèle grossit, les entrées se réutilisent moins bien d'un canal à l'autre, et chaque changement de mise en page devient un changement de contenu. Le contenu a sa place dans Contentful, les choix de mise en page dans la couche frontend.
Le preview token, un secret partagé
Un preview token donne accès aux contenus non publiés. Traitez-le comme un mot de passe de staging, renouvelez-le quand des personnes quittent l'équipe et mettez à jour chaque URL de prévisualisation qui le contient.
La place de Laioutr
Contentful est la couche de contenu : modèles, entrées, brouillons, Preview API et panneau de prévisualisation. Laioutr est la Frontend Management Platform (FMP) : le frontend qui affiche ces contenus avec les données produits, ainsi que l'éditeur avec lequel votre équipe compose les pages. Les deux se complètent.
Content Preview dans le frontend Laioutr. Toute URL de storefront ouverte avec un preview token est rendue à partir des contenus non publiés. Le token est un paramètre de projet dans Cockpit, distinct des autres secrets et renouvelable séparément, et il est prévu pour être inséré dans les modèles d'URL de prévisualisation d'un CMS, par exemple les content preview URLs de Contentful. Le serveur vérifie le token, rend la page côté serveur et l'envoie avec Cache-Control private, no-store. Les caches d'Orchestr sont contournés, et tout token présenté impose noindex, nofollow. Un token erroné affiche simplement la page publiée. Un token valide, en revanche, ouvre l'accès à tous les contenus non publiés du projet : partagez-le comme un mot de passe de staging. Un détail pour votre documentation d'exploitation : un token renouvelé prend effet après le déploiement suivant.
Studio, l'éditeur visuel. Studio, l'éditeur visuel de Laioutr, affiche une prévisualisation en direct de la storefront pendant que votre équipe organise sections et blocks, change de marché et de langue et vérifie les vues par appareil. Son interrupteur « Show preview content » envoie le même preview token : les contenus non publiés des sources connectées peuvent ainsi apparaître dans la vraie mise en page, à condition que le connecteur prenne en charge la prévisualisation. La publication reste une étape décidée par une personne.
La connexion à Contentful lit les contenus via la Content Delivery API, localisation et environments multiples compris. Content Preview transmet à chaque connecteur un signal de prévisualisation vérifié côté serveur ; nous vérifions ensemble lors d'une démo si votre setup Contentful bascule ainsi vers la Preview API. Pour le volet éditorial de ce même setup, lisez Contentful Visual Editing : la couche marketing.
Checklist pour votre prévisualisation
- Définissez une URL de prévisualisation pour chaque content type rendu comme une page à part entière.
- Stockez le preview token côté serveur et documentez qui y a accès.
- Désactivez tous les caches pour les réponses de prévisualisation, y compris les route rules du framework.
- Imposez noindex, nofollow sur chaque URL de prévisualisation.
- Testez des brouillons avec des références non publiées avant la mise en ligne.
- Décidez quels éléments reçoivent un balisage inspector et gardez les champs de mise en page hors du content model.
- Testez la prévisualisation pour chaque langue et chaque marché publié.
FAQ
Faut-il le Live Preview SDK pour utiliser Contentful Live Preview ?
Pas pour l'affichage côte à côte. Le SDK est nécessaire pour l'inspector mode et les live updates.
Pourquoi ma prévisualisation affiche-t-elle des contenus absents du site en ligne ?
Le plus souvent, une entrée référencée est encore un brouillon. La Preview API la renvoie, la Delivery API non. Publiez d'abord les références ou vérifiez-les dans votre routine de mise en production.
Faut-il mettre en cache les pages de prévisualisation ?
Non. Les contenus de prévisualisation changent sans cesse et ne s'adressent qu'aux rédacteurs. Rendez-les côté serveur, servez-les sans cache et marquez-les en noindex.
Laioutr remplace-t-il Contentful Live Preview ?
Non. Contentful reste votre couche de contenu, et sa prévisualisation reste utile pour éditer les entrées. Laioutr ajoute le frontend avec un mode de prévisualisation vérifié côté serveur et sans cache, ainsi que Studio pour composer les pages autour de ces contenus.
Prochaines étapes
Vous voulez voir vos contenus Contentful dans une vraie storefront avec Studio ? Réservez une démo et apportez l'un de vos content types. Nous passerons en revue URLs de prévisualisation, langues et cache en tenant compte de votre setup.