Multisite Architecture

Context

Implementations often require efficiently hosting multiple website properties using a single source for content. To achieve this, it’s important to design a well-structured content tree that ensures scalability and usability.

The Next.js application(s) should be architected to align with this approach, determining whether a single application can handle all sites or if multiple applications are needed. This structure should also seamlessly integrate localization to support diverse audiences.

The following details out the architecture in the case of Next.JS - other frameworks are available, but consider any differences between frameworks and SDKs.

Execution

Approaching this requirement requires decisions on Information Architecture and Application Architecture Hosting.

Multisite Content Tree

Sitecore XM Cloud supports multisite content solutions out of the box (OOTB) through the concept of Site Collections and Sites.

• A Site is a collection of content specific to a single website. This can include Pages, Datasources, and Configuration Items.
• A Site Collection is a grouping for one or more related sites to help organize the sites according to business requirements.

A Site Collection is always required, even for a single site implementation; this is where all data templates & components are stored for use within the Site’s inside that collection.

When deciding how many Site Collections to create and then which collections to add the sites to, these choices will be driven by business requirements.

For example, if a client is a multi-brand client with separate content teams for each brand, each brand should have its own Site Collection. If the client has a single content team or has multiple regional sites within a brand and needs to be able to share content between regional sites, then a single Site Collection can be used taking advantage of XM Cloud Site Management features.

When creating Site Collections, it is important to note that data templates, rendering items and content can only be shared by sites within the same Site Collection.

To share content between sites within a Site Collection, review the Sharing content documentation.

Hosting the Web Application

The XM Cloud implementation architecture consists of:

• XM Cloud, SaaS hosted.
• Rendering Hosts - front-end hosting and editing host.
• Code base/solution.

When we are planning the architecture for multiple sites for the web application, there are 2 main paths:

• One app per website - deploy a separate Next.js web application for each website - this can be the same Next.js application code, or completely different applications, or a combination.
• One app for multiple websites - deploy a single Next.js web application and use the multisite add-on.

There are pros and cons for each consideration, it is up to the architect to weigh the pros/cons and select the best option for the project that meets the business and technical requirements.

Insights

Custom 404 and Error Pages with the Pages Router

As mentioned in the Pros/Cons list, the multisite plugin does not support custom 404 or 500 error pages. This is because Next.js uses special routes (404.tsx and 500.tsx) that are compiled and generated during build time. If you have i18n configured for localization, the configured locales will be taken into account and each locale will have a static version generated.

The multisite plugin relies on dynamic site resolution and a custom rewrite middleware to display the generated content for each site.

If you have multiple sites that require custom 404/500 pages that will be unique per site, you will need to deploy each site as a separate application.

See the github discussion: In multisite setup, the error pages in XMC are not rendered for each site. · Sitecore jss · Discussion #1622

Does each deployed web application need to be a separate Next.js application?

The short answer is no. If you decide that a separately deployed Next.js application is the best option for your project, you can still keep a single Next.js application in your codebase. This is useful if all your sites share markup/styles, but you want the flexibility and benefits of deploying the applications separately. In this case, you would simply deploy the same code to multiple Next.js projects and use environment variables to set the SITECORE_SITE_NAME for each deployment.

Deploying Multiple Editing Hosts

When creating separate applications for sites, you will need to configure the xmcloud.build.json to deploy each site to its own editing host for inline editing using Pages. The XM Cloud build configuration. There is a configuration for the rendering host.

The renderingHosts property is an array of hosts. Out of the box this will be configured to deploy the code to the xmcloudpreview editing host. At the start of the project, this will be re-configured to deploy your own code to the editing host. For a project with multiple applications, you can add extra editing hosts here:

  "renderingHosts": {
    "siteA": {
      "path": "./src/siteA",
      "nodeVersion": "16.3.19",
      "jssDeploymentSecret": "super-secret-value",
      "enabled": true,
      "type": "sxa",
      "buildCommand": "build",
      "runCommand": "next:start"
    },
    "siteB": {
      "path": "./src/siteB",
      "nodeVersion": "16.3.19",
      "jssDeploymentSecret": "super-secret-value",
      "enabled": true,
      "type": "sxa",
      "buildCommand": "build",
      "runCommand": "next:start"
    }
  }

This will provision an editing host for each entry. When this is deployed to XM Cloud, it will create a predefined rendering host item for each host in the config. Make sure that you set the correct predefined host in your site’s definition item.

Related Recipes

Related Documentation