Welcome back to the XM Cloud Basics series!
In previous blog, we’ve covered the foundations of XM Cloud, including setting up an environment and deploying with the Deploy App. If you’ve followed along, you now have a project up and running.

What is Sitecore Edge?

Sitecore Edge is the global content delivery layer for XM Cloud.
It’s a high-performance, CDN-backed service that delivers content via APIs (GraphQL and Layout Service). Instead of hitting your CM instance, all front-end apps consume content through Edge endpoints.

Why Edge?

• Faster Delivery – Content cached at CDN nodes worldwide
• Global Scale – Optimized for performance across regions
• API-first – Fetch content using GraphQL queries
• Secure – Token-based access control

How Edge Fits into XM Cloud Architecture

Here’s the typical flow:

1. Authors create/edit content in XM Cloud (Pages).
2. Content is published → Sitecore Edge.
3. Front-end apps (Next.js, React, Angular, etc.) fetch content via GraphQL APIs.
4. End-users consume blazing-fast content from CDN-powered Edge nodes.

This separation allows XM Cloud to remain lightweight while Edge handles scalable delivery.

Getting Your Edge Endpoint

When you provision an XM Cloud environment, you automatically get Edge endpoints:

• Preview Endpoint – For unpublished/preview content (used with Pages)
• Delivery Endpoint – For live/published content

You can find these under your XM Cloud project → Environment → Edge Settings.

https://edge.sitecorecloud.io/api/graphql/project-id

Making Your First GraphQL Query

Let’s test content delivery with a simple GraphQL query.
Head to your Edge endpoint + /playground (GraphQL Playground is enabled by default).

Example query: This returns the id, name, and fields of the Home item.

{
  item(path: "/sitecore/content/home") {
    id
    name
    fields {
      name
      value
    }
  }
}

Consuming Edge in Next.js

In your Next.js app, you can query Edge using graphql-request or Apollo Client.

Example using graphql-request: This fetches your content during build or runtime, depending on your rendering mode (SSG/SSR).

import { request, gql } from 'graphql-request';

const endpoint = process.env.SITECORE_EDGE_ENDPOINT;

const query = gql`
  {
    item(path: "/sitecore/content/home") {
      id
      name
      fields {
        name
        value
      }
    }
  }
`;

export async function getStaticProps() {
  const data = await request(endpoint, query);
  return { props: { data } };
}

Common Use Cases for Edge

1. Headless Page Rendering – Fetch layout and render components dynamically in Next.js
2. Omnichannel Delivery – Reuse content across websites, mobile apps, kiosks, IoT
3. Personalization (with CDP/Personalize) – Combine Edge content with personalization rules
4. GraphQL Queries – Fetch exactly what you need, reducing payloads

In the next blog, we’ll look at how to build a Next.js app for XM Cloud—scaffolding, connecting to Edge, and rendering components dynamically.

P.S. The blog content is rephrased by AI!

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂

References:

• Sitecore Edge Documentation
• Sitecore GraphQL for Edge
• Sitecore Developer Portal – XM Cloud
• Sitecore JSS Next.js SDK