Integrating Non-Wildcard Pages with Wildcard Pages in Sitecore XM Cloud

Hello again, Sitecorians! ??

Following up on our previous discussion about simplifying wildcard page handling in Sitecore XM Cloud using Next.js, today we’ll explore how to seamlessly integrate non-wildcard pages into the mix. This approach ensures your editors can create specific pages without worrying about them being treated as wildcards.

The Scenario

Consider the following structure of a website:

SomeWebsite
├── Home
│   └── blogposts
│       ├── this-is-not-a-wildcard-page
│       └── *
        

Here, * represents wildcard pages, while this-is-not-a-wildcard-page is a specific non-wildcard page. Our goal is to handle these different types of pages effectively without complicating the routing logic.

The Challenge

Previously, we discussed dynamically detecting wildcard segments based on patterns such as GUIDs or numeric identifiers. However, editors might also need to create specific pages under the same path structure. The challenge is to distinguish between these specific non-wildcard pages and wildcard pages dynamically.

The Solution: Handling Non-Wildcard Pages

We’ll enhance our Next.js routing logic to check if a page is a non-wildcard page before applying the wildcard detection logic. This way, we ensure non-wildcard pages are rendered correctly without being mistaken for wildcard pages.

Utility Function to Check Non-Wildcard Pages

First, we create a utility function to check if a page is a non-wildcard page:

// Function to check if the page is a non-wildcard page
async function checkIfNonWildcardPage(context) {
  const props = await sitecorePagePropsFactory.create(context);
  // If fields are defined, it indicates this is a non-wildcard page
  if (props.layoutData.sitecore.route?.fields != undefined) {
    return {
      isNonWildcardPage: true,
      props,
    };
  }
  return {
    isNonWildcardPage: false,
    props,
  };
}        

The checkIfNonWildcardPage function retrieves the page properties using sitecorePagePropsFactory.create(context). If props.layoutData.sitecore.route?.fields is not undefined, it indicates that the page has specific content fields defined in Sitecore, which is characteristic of non-wildcard pages. Wildcard pages typically do not have these fields directly defined because they rely on dynamic routing and content resolution.

Implementing the Check in getServerSideProps

Next, we modify getServerSideProps to incorporate this check:

export const getServerSideProps: GetServerSideProps = async (context) => {
  // Check if it's a non-wildcard page
  const { isNonWildcardPage, props } = await checkIfNonWildcardPage(context);
  if (isNonWildcardPage) {
    return {
      props,
      notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
    };
  }
 
  if (context.params) {
    const pathArray = Array.isArray(context.params.path)
      ? context.params.path
      : [context.params.path];
 
    // Iterate through the path segments
    for (let i = 0; i < pathArray.length; i++) {
      const segment = pathArray[i];
 
      // Check if the current segment contains an identifier
      if (containsIdentifier(segment)) {
        const beforeIdentifierSegment = pathArray.slice(0, i).join('/');
        context.params.path = [`${beforeIdentifierSegment}/,-w-,`];
        break; // Exit loop once a match is found
      }
    }
  }
 
  // Retrieve final props after potentially modifying the context
  const finalProps = await sitecorePagePropsFactory.create(context);
 
  return {
    props: finalProps,
    notFound: finalProps.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};        

Implementing the Check in getStaticProps

This approach can also be applied in getStaticProps for static site generation (SSG). Here’s a typical getStaticProps method with the necessary logic:

export const getStaticProps: GetStaticProps = async (context) => {
  // Check if it's a non-wildcard page
  const { isNonWildcardPage, props } = await checkIfNonWildcardPage(context);
  if (isNonWildcardPage) {
    return {
      props,
      revalidate: 5, // Set revalidation time to ensure fresh data
      notFound: props.notFound, // Handle 404 responses appropriately
    };
  }
 
  if (context.params) {
    const pathArray = Array.isArray(context.params.path)
      ? context.params.path
      : [context.params.path];
 
    // Iterate through the path segments
    for (let i = 0; i < pathArray.length; i++) {
      const segment = pathArray[i];
 
      // Check if the current segment contains an identifier
      if (containsIdentifier(segment)) {
        const beforeIdentifierSegment = pathArray.slice(0, i).join('/');
        context.params.path = [`${beforeIdentifierSegment}/,-w-,`];
        break; // Exit loop once a match is found
      }
    }
  }
 
  // Retrieve final props after potentially modifying the context
  const finalProps = await sitecorePagePropsFactory.create(context);
 
  return {
    props: finalProps,
    revalidate: 5, // Set revalidation time to ensure fresh data
    notFound: finalProps.notFound, // Returns custom 404 page with a status code of 404 when true
  };
};        

Note: While this method should generally work with getStaticProps, be mindful of certain nuances:

• Incremental Static Regeneration (ISR): Useful for regenerating pages at runtime, especially when content updates frequently.
• Data Caching: Properly handle caching to ensure that users always receive the most up-to-date content.

Explanation of the Code

This updated logic ensures that non-wildcard pages are identified and handled appropriately before we apply the wildcard detection:

1. checkIfNonWildcardPage Function: This function checks if the current page is a non-wildcard page by retrieving its properties. If the page has defined fields, it’s considered a non-wildcard page.
2. Modified getServerSideProps:Initial Check: We first check if the page is a non-wildcard page. If it is, we return the props directly without further processing.Path Iteration: If the page is not a non-wildcard page, we proceed to iterate through the path segments to check for wildcard patterns.

This approach ensures that specific pages like this-is-not-a-wildcard-page are rendered correctly without being treated as wildcards.

Why This Method Rocks

This enhanced method doesn’t just simplify wildcard page management; it revolutionizes it! By dynamically supporting non-wildcard pages, we’ve unlocked a flexible and robust solution that minimizes manual updates and adapts effortlessly to new page types.

I love how this approach brings the efficiency and flexibility of the old Sitecore XP setup back to life. It’s a total game-changer for developers and editors alike, making the whole process smoother and more intuitive. Seriously, this is going to make your life so much easier! ??

That’s all for now folks ??