Sitecore XM Cloud Content Preview Diagram
Sitecore XM Cloud provides a robust content preview mechanism that allows content authors to preview their changes before publishing them to the live site. Let me create a diagram that illustrates how the preview and live modes work in Sitecore XM Cloud.
How Sitecore XM Cloud Preview Works
Content Authoring:
- Content authors create or modify content in the Sitecore XM Cloud authoring environment
- Changes are stored in the Master database but not yet published to the Web database
Preview Mode 1:
- When an author wants to preview changes, they trigger a preview request
- The preview service sets special preview cookies (
__prerender_bypassand__next_preview_data) - These cookies enable Next.js to bypass static generation for preview content
- The Next.js Preview API fetches the latest content from the Master database
- Content is rendered with draft/unpublished changes visible
Live Mode:
- When content is ready, authors publish it from Master to Web database
- Regular site visitors access the site without preview cookies
- Next.js serves statically generated content from the Web database
- Only published content is visible to end users
This workflow allows content authors to safely preview and test their changes before making them publicly available, while maintaining the performance benefits of static generation for the live site.
372d ago
Sitecore XM Cloud Content Preview Sequence Diagram
Here's a sequence diagram that illustrates the flow of content through Sitecore XM Cloud, showing both preview and live publishing modes:
Explanation of the Sequence
This diagram shows the complete content lifecycle in Sitecore XM Cloud:
Content Creation Phase
- The content author creates or edits content in the Sitecore XM Cloud interface
- Changes are saved to the Master database in a draft state
- At this point, changes are not visible to end users
Preview Phase
- The author requests to preview their changes
- The preview service generates a secure preview token
- The author accesses a special preview URL containing this token
- Next.js validates the token and sets preview cookies
- The frontend fetches content directly from the Master database (including unpublished changes)
- The author can see exactly how their changes will look when published
Publishing Phase
- Once satisfied, the author approves and publishes the content
- The CMS marks the content as approved in the Master database
- Approved content is copied to the Web database
Live Site Access
- End users request pages from the Next.js frontend
- Without preview tokens, Next.js fetches only published content from the Web database
- Users see only the published version of the site
This sequence diagram clearly shows the separation between preview and live environments, and how content flows through the system from authoring to publishing.
372d ago