Quickstart guide - All about Sitecore Experience Edge

Table of contents

• 🏗 Introduction
• 🌐 Understanding Sitecore Headless Architecture: Separating the Rendering Host from the Data Host
• ⚙️ Sitecore Headless Domain Configuration Strategy
• 🧩 Sitecore Headless Service: Where Should It Be Hosted?
• 📡 Connecting the Frontend to Sitecore's Backend
• 🐳 Sitecore Container Deployment Best Practices
• 🖼️ Sitecore Headless Architecture Diagram
• 💡 Addressing Common Misconceptions
• 🏁 Summary Table: Domain Usage
• 🔚 Conclusion
• 🧾 Credit/References

🏗 Introduction

Setting up a Sitecore Headless SXA site with Next.js needs careful planning for domains, endpoints, and networking. A common challenge is setting up the Layout Service and GraphQL endpoints while keeping a secure and scalable setup. This guide explains best practices for CM/CD roles, container deployments, and frontend access in both local development and higher environments.

🌐 Understanding Sitecore Headless Architecture: Separating the Rendering Host from the Data Host

Sitecore's headless architecture separates the content management system (CMS) from the presentation layer. This lets developers create modern, fast websites using frameworks like Next.js, while still using Sitecore’s powerful content features.

The main idea of headless is separation of concerns: Sitecore manages content creation, and the frontend application handles rendering and user experience. This setup boosts scalability and performance and allows content to be used across websites, apps, and other digital platforms.

The fundamental principle to understand is the separation of concerns:

1. The Sitecore Content Delivery (CD) Role acts as the data host for end-users. It provides access to the Layout Service and GraphQL endpoints. This serves as your backend Sitecore API for published or approved content if you are using Sitecore XP or Sitecore XM. If you are using Sitecore Experience Edge (SaaS), then use the XE API endpoint.
   
   
2. The Sitecore Content Management (CM) Role is the data host for users who create content. It provides access to the Layout Service and GraphQL endpoints. This is your backend Sitecore API for draft or unpublished content if you are using Sitecore XP or Sitecore XM. It remains the same if you are using Sitecore Experience Edge (SaaS) as the Content Delivery for end-users.
   
   
3. The Rendering Host is the Sitecore Headless Front-End (FE) App (like Next.js) that shows the user interface to the end-user and retrieves data from the data host (Published Content).
   
   
4. The Editing Rendering Host is the Sitecore Headless Front-End (FE) App (like Next.js) that displays the user interface for Content Authoring or Sitecore Experience Editor Support. It gets data from the Sitecore Content Management Role.
   
   

⚙️ Sitecore Headless Domain Configuration Strategy

Domain and URL structure follow the separation mentioned above. Usually, Content Management (CM) and Content Delivery (CD) roles have their own subdomains (e.g., cm.contoso.com and cd.contoso.com), while each frontend site has its own domain for users. APIs like Layout Service and GraphQL are accessed through the CD domain or Sitecore Experience Edge (SaaS) API endpoint, ensuring a secure and consistent setup.

For a clean and scalable headless setup, follow this domain pattern:

1. cm.contoso.com: This is for the Sitecore Content Management (CM) server.
   
   
2. cd.contoso.com: This is for the Sitecore Content Delivery (CD) server. It's the main domain for your Sitecore Headless Service endpoint (e.g., https://cd.contoso.com/sitecore/api/graph/edge).
   
   
3. marketing.contoso.com: This is for the live front-end application (like your Next.js app on Vercel/Netlify/Web App) and uses the Sitecore Content Delivery (CD) server or Sitecore Experience Edge (SaaS) endpoint.
   
   
4. preview.contoso.com: This is for the preview front-end application (like your Next.js app on Vercel/Netlify/Web App) and uses the Sitecore Content Management (CM) server endpoint to check the Sitecore Content before it's published on the live website.
   
   

💡 Key Insight: Avoid creating new domains for internal services like CD or CM endpoints. Instead, use the existing CD or CM domain (e.g., CD.Contoso.com or CM.Contoso.com).

🧩 Sitecore Headless Service: Where Should It Be Hosted?

The Sitecore Headless service is used by headless apps to get dynamic site structure data. For security and easy maintenance:

1. The Sitecore Headless Service endpoint should be exposed only via the CD domain (cd.contoso.com).
   
   
2. Avoid exposing internal Docker service names like https://rendering on public networks; these should remain private within the container network.
   
   
3. New site nodes in Sitecore are configured primarily for routing and data exposure, not for service endpoint hosting.
   
   

💡 An important point to remember is that if you are using the Sitecore Headless SXA-based implementation, you don't need to add a new Site Node in Sitecore CM and Sitecore CD, including the JSS App node.

📡 Connecting the Frontend to Sitecore's Backend

Your frontend application doesn't directly access the CM domain unless it's for PREVIEW content. Instead, it makes API calls to the Content Delivery (CD) domain to fetch data. The Sitecore Layout Service and GraphQL endpoint are provided by the CD instance.

1. For Higher Environments (Production/Staging): The frontend app, hosted on a domain like marketing.contoso.com, will be set up to send API requests to the CD domain, like cd.contoso.com.
   
   
2. For Local Development: Developers don't need to start the whole Sitecore stack unless they can't connect via VPN. They can run their frontend application locally on localhost:3000 (or a similar address) and set it up to connect to the dev CD environment (e.g., dev.contoso.com) through a VPN. This is a common and efficient way to work.
   
   
3. XP0 for Dev Environments: In a single-instance XP0 setup, often used in local development, the CM role can provide the Sitecore Headless Service.
   
   

🐳 Sitecore Container Deployment Best Practices

• Development Environment Setup  
  For development environments, you have two main options:
  
  1. Option 1: Full Container Deployment
     
     1. All Sitecore roles run in containers
        
     2. Frontend applications also containerized
        
     3. Internal communication via container network
        
  2. Option 2: Hybrid Development
     
     1. Sitecore roles in containers (accessible via VPN)
        
     2. Frontend development on localhost:3000
        
     3. External API calls to containerized Sitecore services
        
  
  
• Production Environment Considerations  
  Production Setup:
  ├── CM Server (Content Management)
  ├── CD Server (Content Delivery + Layout Service)
  ├── Web Apps (Headless Frontend Applications)
  └── Load Balancer (Traffic Distribution)
  
  
• Sitecore Docker Container Networking Explained  
  In a local Docker development environment, like using Sitecore Containers, communication switches from public domains to internal Docker service names.
  
  1. Public Domain: dev.contoso.com (loads traditional MVC site)
     
     
  2. Internal Docker Service: The CD container is recognized by its service name within the Docker network, usually http://cd.
     
     
  3. The Correct Approach: Your Next.js application, when set up in its own container, should connect to the Sitecore Headless Service using the internal Docker service name of the CD role http://cd. If you are running your Next.js application on localhost:3000, then connect to the Sitecore CM or CD role using their public domain names, like CM.Contoso.com or CD.Contoso.com. This is because using a public domain like marketing.contoso.com inside the container network won't work.
     
  
  ℹ️ You added a new site node for marketing.contoso.com in Sitecore. This is correct for telling Sitecore which site to resolve. However, the endpoint the FE uses to call Layout Service should be the CD's host (cd.contoso.com or the internal service http://cd).

🖼️ Sitecore Headless Architecture Diagram

The following data flow diagrams give a visual summary of Sitecore Headless architecture. They show how frontend applications link to CD endpoints and layout services in local, higher, and container environments:

1. Data Flow Diagram for Local Development:
   
   This diagram shows how data flows in a local development setup. The Next.js app runs on localhost:3000 and connects to the Sitecore Layout Service or Sitecore GraphQL endpoint through the CM role (CM.contoso.com), the CD role (CD.contoso.com), or the Sitecore Experience Edge (SaaS) endpoint.
   
   
2. Data Flow Diagram for Containerized Dev Environment:
   
   This diagram shows how data moves in a containerized development environment. The Next.js app talks to the CD role (http://cd) within a Docker network.
   
   
3. Data Flow Diagram for Production Environment:
   
   This diagram shows how data moves in a production setup. The Next.js app (marketing.contoso.com) connects to the Layout Service through the CD role (CD.Contoso.com).
   

💡 Addressing Common Misconceptions

Sometimes team members get confused about domains and URLs, so let's clarify:

1. Domain for Sitecore Headless Service: It is incorrect to create a new, separate domain just for the Sitecore layout service (like marketing.contoso.com for the layout service itself). The layout service is just an endpoint on your existing CD domain. Your Sitecore site node for the headless site should be set to use the new domain for your front-end app as marketing.contoso.com and get content from the Sitecore Content Delivery (CD) server or Sitecore Experience Edge (SaaS) endpoint.
   
   
2. Frontend App Domain: A new domain for the frontend application is necessary. This is the domain where users will visit your website. You need to set this up with your hosting provider (like a Web App) and in your Sitecore Site configuration.
   
   
3. Internal Container URLs: The URL https://rendering or https://headless is probably an internal Docker service name. It is not for external or developer use and won't work outside the container network.
   

🏁 Summary Table: Domain Usage

Purpose	Example Domain	Internal/External	Usage Details
Sitecore CM Role	cm.contoso.com	External	Admin, Content Editing
Sitecore CD Role	cd.contoso.com	External	Sitecore Layout Service, Sitecore GraphQL endpoint
Sitecore Headless Frontend Site	marketing.contoso.com	External	User-facing Headless App
Sitecore Headless Frontend Editing Site	editing.contoso.com	Internal	Editing Rendering Host (use Content from CM and not Publicly exposed) for Content Authors
Sitecore Headless Frontend Preview Site	preview.contoso.com	Internal	To Preview Draft Content (use Content from CM and not Publicly exposed) by Reviewer
Docker Internal Layout/GraphQL	http://cd, http://rendering	Internal	Container network only, not Publicly exposed

🔚Conclusion

Setting up a headless Sitecore website with Sitecore Headless Service and Next.js needs careful planning of domains, container setups, and access. Use the CD role for the Layout Service, give different subdomains for front-end apps, and make sure container networking is set up right to build a scalable and efficient headless system. For development environments, use existing domains and VPN access to make development and testing easier.


If you have any other solutions 🔠 or tips 💬, please share them to help others in the community.

If you enjoy this content, consider subscribing 📰 for more updates and insights. Your engagement is very important to me and helps me keep providing valuable resources! 🌟

🧾Credit/References

Architecture overview - Sitecore Documentation: The official documentation providing a conceptual overview of Sitecore's headless architecture, covering data flow and core components like the Layout Service.	JavaScript Services SDK (JSS) for Next.js - Sitecore Documentation: An in-depth guide on using the Sitecore JSS SDK specifically with Next.js, detailing features, supported functionalities, and developer workflows.	Sitecore GraphQL best practices: A guide from Sitecore on the recommended practices for configuring and consuming the GraphQL API, including endpoint setup and security considerations.
Sitecore Headless Development: Official Sitecore documentation covering headless architecture concepts, JSS, Layout Service, and GraphQL endpoints.	Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container	Sitecore Experience Edge GraphQL Queries

🔗Pingback

How to Migrate Your Next.js App from Sitecore JSS to Content SDK	How to Fix Sitecore Content Serialization Errors	Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing
What is Sitecore PowerShell Extensions? A Beginner's Guide: Discover how Sitecore PowerShell Extensions (SPE) integrates powerful scripting into the Sitecore client to automate tasks, manage content, and supercharge productivity for developers and admins.	Getting Started with Sitecore PowerShell: Take your first steps into Sitecore automation with this beginner's guide to writing and executing basic PowerShell scripts directly within the Sitecore Experience Platform.	How to Use Regular Expressions (Regex) in Sitecore PowerShell: Learn how to harness the power of regular expressions in your SPE scripts to efficiently filter, search, and manipulate Sitecore items and data with precision.
Avoiding Sitecore XM Cloud Errors - Enlighten with Amit	🚨 XM Cloud (XMC) Update 🚨 | Amit Kumar	XM Cloud Changelog | Sitecore Developer Portal
Sitecore Headless: How to Correctly Set Up Domains for Layout Service: Confused about which domain to use for the Sitecore Layout Service? This guide explains the difference between the front-end domain and the CD API domain in a headless architecture.	How Sitecore Containers Communicate: Internal Docker Service Names Explained: Learn how Sitecore Docker containers use internal service names like http://cd for communication between the front-end and Layout Service, simplifying local development.	Sitecore JSS and Next.js Production Domain Architecture Best Practices: Planning your production domain structure for Sitecore Headless? See the recommended setup with separate domains for CM, CD, and front-end for security and scalability.
How to Fix "Connection Failed" Errors to Sitecore Layout Service: Is your Next.js app failing to connect to the Sitecore Layout Service? Learn common causes and solutions for Docker and remote environment configurations.	What is the Sitecore CD Role in a Headless Setup? A Complete Guide: Understand the critical role of the Sitecore Content Delivery (CD) server as the headless API endpoint for Layout and GraphQL services in JSS.	Sitecore Experience Edge vs. CD: Which Headless API Should You Use?: Compare Sitecore Experience Edge SaaS and the traditional CD server for delivering headless content. Learn the use cases, benefits, and architectural differences.
Configure Sitecore JSS Next.js for Local Development Against a Remote Instance: Learn how to set up your local Next.js development environment to connect to a remote Sitecore CM/CD instance using VPN and environment variables.	How to Configure a Sitecore Headless Site Definition for JSS: A step-by-step guide to adding and configuring a new site definition in Sitecore for a headless application, including hostname and patch file configuration.	How to Access the Sitecore GraphQL Endpoint in a Headless Application: Learn the correct endpoint and authentication methods to query Sitecore data using GraphQL from your Next.js, React, or other headless front-ends.