Strukturierte Produktdaten heißt: Jede Produkteigenschaft steckt in einem typisierten Attribut mit E…
Contentful Live-Vorschau: Was dein Frontend dafür leisten muss
Mit der Contentful Live-Vorschau sehen Redakteure einen Entwurf direkt neben dem Eingabeformular und verfolgen Änderungen, während sie tippen. Contentful liefert das Vorschaufenster, die Content Preview API und das Live Preview SDK, die Seite im Vorschaufenster ist aber dein Frontend. Ob die Vorschau stimmt, schnell lädt und sicher bleibt, entscheidet sich daran, wie dieses Frontend mit Entwürfen, Caching, Indexierung und Sprachen umgeht.
Woraus die Contentful Live-Vorschau besteht
Die Live-Vorschau setzt sich aus vier Bausteinen zusammen. Wer sie früh benennt, kann den Aufwand im Team sauber schätzen.
- Content Preview URLs: In der Contentful-Web-App legst du pro Content Type eine Vorschau-URL fest. Sie zeigt auf deine Website oder Storefront, also auf die Seite, die den Entwurf rendert.
- Content Preview API: Entwürfe kommen aus einer eigenen API unter preview.contentful.com. Sie braucht ein separates Preview Access Token, produktive Delivery-API-Tokens funktionieren dort nicht, und sie hat ein eigenes Rate Limit, das vom Plan abhängt.
- Vorschaufenster: Redakteure sehen die Seite neben dem Entry-Editor. Laut Contentful-Dokumentation funktioniert diese Nebeneinander-Ansicht auch ohne SDK.
- Live Preview SDK: Das Paket @contentful/live-preview ergänzt zwei erweiterte Funktionen. Mit dem Inspector Mode klicken Redakteure auf ein Element in der Vorschau und springen direkt zum passenden Feld. Live Updates zeigen Änderungen ohne Neuladen. Das SDK unterstützt reines JavaScript und React, inklusive Next.js.
Kurz gesagt: Contentful verwaltet Inhalte und Entwürfe, dein Frontend rendert, was Redakteure sehen.
Was dein Frontend leisten muss
Damit dein Team der Vorschau vertraut, muss das Frontend sechs Aufgaben erfüllen. Falls ihr die Contentful-Anbindung selbst noch plant, helfen dir unsere 10 Praxistipps zur Contentful-Anbindung aus Frontend-Sicht bei den Grundlagen.
- Entwürfe auf Anfrage rendern. Im Vorschaumodus fragt das Frontend mit dem Preview-Token die Preview API statt der Delivery API ab. Das Token bleibt auf dem Server und landet nie im Browser-Bundle.
- Serverseitig ohne Cache rendern. Eine Vorschau-Antwort darf in keinem CDN, Reverse Proxy oder Framework-Cache landen. Sonst sehen Redakteure veraltete Entwürfe, oder Kunden sehen einen Entwurf.
- Vorschauseiten aus der Suche halten. Jede Vorschau-URL braucht noindex, nofollow, unabhängig von den normalen SEO-Einstellungen der Seite.
- Felder für den Inspector Mode taggen. Elemente bekommen Data-Attribute wie data-contentful-entry-id und data-contentful-field-id oder den SDK-Helper getProps. Contentful empfiehlt, größere Elemente und ganze referenzierte Einträge zu taggen, nicht jedes kleine Element oder jeden Styling-Parameter. In Premium-Plänen können Content Source Maps einen Teil dieses Taggings automatisieren.
- Sprachen explizit behandeln. Das SDK wird mit einer Locale initialisiert, und Live Updates unterstützen keine mehreren Locales in einer GraphQL-Abfrage. Die Lokalisierung der Vorschau, also ein Sprachumschalter in der Live-Vorschau und eigene Preview-Tokens pro Markt, gibt es in Premium-Plänen.
- Einbettung erlauben. Die Vorschau läuft als iframe in der Contentful-Web-App. Dein Frontend muss das per Content-Security-Policy mit frame-ancestors für app.contentful.com erlauben statt es über einen X-Frame-Options-Header zu blockieren, und Cookies brauchen SameSite=None und Secure.
Typische Stolpersteine
Die Vorschau zeigt etwas anderes als die Live-Seite
Der häufigste Grund sind Referenzen. Die Preview API löst verknüpfte Einträge auf, die noch Entwürfe sind, die Delivery API liefert nur veröffentlichte Inhalte. Ein Teaser wirkt in der Vorschau vollständig und fehlt nach dem Veröffentlichen. Weitere typische Ursachen sind ein anderes Environment in der Vorschau-URL oder ein Sprach-Fallback, der nur auf einer Seite greift.
Performance in der Vorschau
Die Vorschau ist bewusst ungecacht, jeder Aufruf trifft also die Preview API und dein Rendering. Auf Seiten mit vielen Referenzen macht sich das Rate Limit bemerkbar, plane deshalb schlanke Vorschau-Abfragen.
Layout-Felder im Content Model
Damit die Vorschau gut aussieht, ergänzen Teams gern Felder für Farben, Abstände oder Spaltenanzahl im Content Type. Das Modell wächst, Einträge lassen sich schlechter kanalübergreifend wiederverwenden, und jede Layout-Änderung wird zur Content-Änderung. Inhalte gehören nach Contentful, Layout-Entscheidungen in die Frontend-Ebene.
Das Preview-Token als geteiltes Geheimnis
Ein Preview-Token öffnet den Zugriff auf unveröffentlichte Inhalte. Behandle es wie ein Staging-Passwort, rotiere es, wenn Personen das Team verlassen, und aktualisiere jede Vorschau-URL, die es enthält.
Wo Laioutr ins Spiel kommt
Contentful ist die Content-Ebene: Modelle, Einträge, Entwürfe, die Preview API und das Vorschaufenster. Laioutr ist die Frontend Management Platform (FMP): das Frontend, das diese Inhalte zusammen mit Produktdaten rendert, plus der Editor, mit dem dein Team Seiten zusammenstellt. Beides ergänzt sich.
Content Preview im Laioutr-Frontend. Jede Storefront-URL, die mit einem Preview-Token geöffnet wird, rendert gegen unveröffentlichte Inhalte. Das Token ist eine Projekteinstellung im Cockpit, getrennt von anderen Secrets und separat rotierbar, und genau dafür gedacht, in Vorschau-URL-Vorlagen eines CMS eingetragen zu werden, etwa in die Content Preview URLs von Contentful. Der Server prüft das Token, rendert die Seite serverseitig und sendet sie mit Cache-Control private, no-store. Die Caches von Orchestr werden umgangen, und jedes mitgesendete Token erzwingt noindex, nofollow. Ein falsches Token rendert einfach die veröffentlichte Seite. Ein gültiges Token öffnet dagegen alle unveröffentlichten Inhalte des Projekts, teile es also wie ein Staging-Passwort. Ein Detail für euer Betriebshandbuch: Ein rotiertes Token greift nach dem nächsten Deployment.
Studio als visueller Editor. Studio, der visuelle Editor von Laioutr, zeigt eine Live-Vorschau der Storefront, während dein Team Sections und Blocks anordnet, Märkte und Sprachen wechselt und Geräteansichten prüft. Der Schalter "Show preview content" sendet dasselbe Preview-Token, sodass unveröffentlichte Inhalte aus angebundenen Quellen im echten Seitenlayout erscheinen können, sofern der Connector die Vorschau unterstützt. Veröffentlicht wird weiterhin bewusst durch einen Menschen.
Die Contentful-Anbindung liest Inhalte über die Content Delivery API, inklusive Lokalisierung und mehrerer Environments. Content Preview gibt jedem Connector ein serverseitig geprüftes Vorschau-Signal; ob dein Contentful-Setup damit auf die Preview API umschaltet, klären wir gemeinsam in einer Demo. Wie das redaktionelle Arbeiten im selben Setup aussieht, liest du in Contentful Visual Editing: die Marketing-Ebene.
Checkliste für dein Vorschau-Setup
- Lege für jeden Content Type, der als eigene Seite rendert, eine Vorschau-URL fest.
- Speichere das Preview-Token serverseitig und dokumentiere, wer Zugriff hat.
- Deaktiviere alle Caches für Vorschau-Antworten, auch Route Rules im Framework.
- Erzwinge noindex, nofollow auf jeder Vorschau-URL.
- Teste Entwürfe mit unveröffentlichten Referenzen vor dem Go-live.
- Entscheide, welche Elemente Inspector-Tags bekommen, und halte Layout-Felder aus dem Content Model heraus.
- Teste die Vorschau für jede Sprache und jeden Markt, den du veröffentlichst.
FAQ
Brauche ich das Live Preview SDK für die Contentful Live-Vorschau?
Nicht für die Nebeneinander-Ansicht. Das SDK brauchst du für den Inspector Mode und für Live Updates.
Warum zeigt meine Vorschau Inhalte, die auf der Live-Seite fehlen?
Meist ist ein referenzierter Eintrag noch ein Entwurf. Die Preview API liefert ihn, die Delivery API nicht. Veröffentliche Referenzen zuerst oder prüfe sie fest in deiner Release-Routine.
Sollten Vorschauseiten gecacht werden?
Nein. Vorschau-Inhalte ändern sich ständig und sind nur für Redakteure gedacht. Rendere sie serverseitig, liefere sie ungecacht aus und markiere sie mit noindex.
Ersetzt Laioutr die Contentful Live-Vorschau?
Nein. Contentful bleibt deine Content-Ebene, und die Live-Vorschau bleibt nützlich, um Einträge zu bearbeiten. Laioutr ergänzt das Frontend mit einem serverseitig geprüften, ungecachten Vorschaumodus und Studio, um die Seiten rund um diese Inhalte zu gestalten.
Nächste Schritte
Du willst sehen, wie Contentful-Inhalte in einer echten Storefront mit Studio aussehen? Buch dir eine Demo und bring einen deiner Content Types mit. Wir gehen Vorschau-URLs, Sprachen und Caching gemeinsam mit Blick auf dein Setup durch.