Introduction:
In the rapidly evolving landscape of digital experience platforms, Sitecore maintains its position as a key player, offering versatile solutions tailored to diverse business needs. Sitecore SXA (Sitecore Experience Accelerator) has been a long-time favorite among developers and marketers for its ability to streamline website development and content management processes. However, with the emergence of Sitecore Headless, the SXA landscape is changing – so let’s take a look and what those differences bring.
Traditionally speaking, what did SXA bring to the table?
- Multisite support:
- Manage and operate multiple websites from a single instance of Sitecore. This feature allows organizations to create and maintain multiple websites, each with its own unique branding, content, and layout, all within the same Sitecore environment.
- Page Designs and Partial Designs:
- Key components used to structure and design web pages.
- Page Designs: Refer to templates that define the overall layout and structure of a web page, including header, footer, and main content areas. They provide a framework for organizing content and defining the visual elements of a page.
- Partial Designs: Are reusable components or sections of a page design that can be shared across multiple pages. These can include header and footer sections, as well as other common elements like navigation menus, sidebars, or promotional banners. Using partial designs helps maintain consistency across the website and streamlines the development process by enabling the reuse of design elements.
- Page Branches:
- Hierarchical structures used to organize and manage related web pages within a website.
- Definition: Page branches serve as containers for grouping pages based on common themes, topics, or purposes. They provide a hierarchical organization that helps maintain clarity and organization within the website’s content structure.
- Usage: Website administrators can use page branches to efficiently navigate and manage large sets of web pages. By grouping related pages together under a single branch, they can easily locate and make updates to specific sections of the website.
- Benefits: Page branches promote better organization and management of website content, making it easier for content editors to find and maintain pages. Additionally, they facilitate the creation of consistent navigation structures and improve the overall user experience by providing a logical hierarchy for accessing information.
- Rendering Variants:
- Customizable templates used to define the presentation and layout of content items on web pages.
- Definition: Rendering variants allow content authors and designers to control how content is displayed by specifying different rendering rules and markup structures.
- Usage: Content authors can choose from a variety of rendering variants when adding or editing content items, enabling them to tailor the appearance of content based on specific requirements or design preferences.
- Customization: Rendering variants can be customized to accommodate various content types, formats, and styling options. They offer flexibility in designing dynamic and visually appealing web pages by allowing for the inclusion of components such as images, text, links, and other multimedia elements.
- Benefits: By using rendering variants, content authors can create engaging and visually appealing content presentations without requiring extensive knowledge of web development. This empowers them to deliver rich and interactive user experiences while maintaining consistency across the website.
- Grids and Styles:
- Foundational tools used to create responsive and visually appealing web layouts.
- Grids: Grid systems provide a framework for organizing content on web pages into rows and columns, enabling developers and designers to create flexible and responsive layouts. Sitecore SXA includes built-in grid frameworks, such as Bootstrap or Foundation, which allow users to easily define grid structures and adjust column widths to accommodate different screen sizes.
- Styles: Styles in Sitecore SXA refer to predefined sets of design attributes and formatting rules that can be applied to elements within web pages. These styles include typography settings, color schemes, spacing guidelines, and other visual enhancements. By utilizing styles, content authors and designers can maintain consistency in design across the website and ensure a cohesive brand identity.
- Sitecore SXA provides options for customizing grids and styles to align with specific design requirements and branding guidelines. Users can create custom grid layouts and define unique styles to achieve the desired look and feel for their website.
- Out-of-the-Box Components:
- Out-of-the-box components are pre-built modules and widgets that provide functionality for creating dynamic and interactive web pages without requiring custom development.
- Definition: These components come bundled with Sitecore SXA and are ready to use immediately after installation. They cover a wide range of functionalities, including navigation menus, image carousels, content lists, forms, and more.
- Features: Out-of-the-box components offer various features and settings that can be configured to meet specific requirements. Users can easily customize the appearance, behavior, and content of these components through the Sitecore Experience Editor or Content Editor.
- Advantages: By leveraging out-of-the-box components, organizations can accelerate the website development process and reduce the need for extensive custom coding. These components are designed to be responsive and compatible with modern web standards, ensuring optimal performance and usability across different devices and browsers.
- Expandability: While Sitecore SXA provides a comprehensive set of out-of-the-box components, it also supports extensibility through custom component development. Organizations can create their own custom components or integrate third-party components to further enhance the functionality and capabilities of their websites.
- Themes:
- Collections of design assets, including stylesheets, JavaScript files, images, and fonts, that define the visual appearance and branding of a website.
- Definition: Themes encapsulate the visual identity of a website, allowing users to apply consistent design elements, such as colors, typography, and layout styles, across all pages.
- Customization: Sitecore SXA supports the creation of custom themes, enabling organizations to tailor the look and feel of their website to match their brand guidelines and design preferences. Users can modify existing themes or create new ones from scratch to achieve the desired aesthetic.
- Benefits: By using themes, organizations can maintain brand consistency and streamline the design process, as changes made to a theme automatically propagate to all pages using that theme. This simplifies maintenance and ensures a cohesive user experience throughout the website.
- Asset Optimizer:
- Tool that helps improve website performance by optimizing and bundling assets, such as CSS, JavaScript, and images.
- Functionality: The Asset Optimizer analyzes the assets used in a website and combines them into optimized bundles to reduce the number of HTTP requests and minimize file sizes. It also applies techniques like minification and compression to further optimize asset delivery.
- Configuration: Sitecore SXA provides configuration options for fine-tuning the optimization process, allowing users to specify which assets to include in optimization bundles and adjust optimization settings based on performance requirements.
- Benefits: By using the Asset Optimizer, organizations can enhance website performance, resulting in faster page load times and improved user experience. Additionally, optimized assets can reduce bandwidth usage and server load, leading to cost savings and better scalability.
- Error Handling:
- Error handling in Sitecore SXA involves managing and presenting errors that occur during website interactions, ensuring a smooth user experience.
- Definition: Error handling mechanisms detect and handle errors such as 404 (Page Not Found) or 500 (Internal Server Error) to provide users with helpful messages or alternative content.
- Customization: Sitecore SXA allows users to customize error pages to match the website’s design and branding. This customization helps maintain consistency and reinforces the website’s identity even during error situations.
- Best Practices: Implementing effective error handling is crucial for maintaining user trust and engagement. Providing clear error messages and suggesting relevant actions can help users navigate through issues seamlessly.
- Redirects:
- Redirects in Sitecore SXA enable the mapping of old or outdated URLs to new or existing ones, preserving SEO value and user experience.
- Purpose: Redirects ensure that users and search engines are directed to the correct content, even if the URL structure has changed.
- Types of Redirects: Sitecore SXA supports various types of redirects, including 301 (Permanent Redirect) and 302 (Temporary Redirect), each serving different purposes based on the intended outcome.
- Configuration: Users can configure redirects through the Sitecore interface or by editing configuration files, allowing for precise control over redirection behavior.
- Robots:
- Users have the ability to customize the robots.txt file, providing directives to search engine crawlers regarding which pages or sections of the website should be crawled or ignored. This configuration aids in optimizing SEO performance and effectively managing crawl budget by controlling crawler access to specific pages or directories.
- Sitemap:
- Sitecore SXA simplifies the process of generating XML sitemaps, which assist search engines in efficiently discovering and indexing website content. By automatically generating sitemaps, Sitecore SXA enhances website visibility and facilitates better indexing of pages, ultimately improving search engine rankings.
- Site-Specific Layout Standard Values:
- SXA offers the capability to define standard values specific to each site within a multisite environment, ensuring consistency and efficiency in website layout management.
- Definition: Site-specific layout standard values allow administrators to set default layout configurations, such as placeholders, renderings, and styling options, that are unique to each individual site.
- Functionality: By establishing site-specific layout standard values, organizations can streamline the process of creating new pages and maintaining consistency across different sites within the same Sitecore instance. This ensures that each site adheres to its designated layout guidelines and branding standards.
- Customization: Sitecore SXA provides flexibility in customizing layout standard values for each site, enabling administrators to tailor default settings according to the specific requirements and preferences of individual sites.
- Benefits: Implementing site-specific layout standard values promotes efficiency in website management, reduces the risk of inconsistencies between sites, and enhances overall brand cohesion. It simplifies the process of launching new sites within a multisite environment while maintaining centralized control over layout configurations.
- Site Scaffolding and Cloning:
- Scaffolding: Site scaffolding in Sitecore SXA involves the predefined setup of essential components, templates, and structures for rapidly building new websites or sections within existing sites. This scaffolding streamlines the initial setup process, providing a foundation that aligns with best practices and organizational standards.
- Cloning: Site cloning enables the duplication of entire sites or specific sections, including content, layouts, and configurations, to expedite the creation of similar sites or sub-sites. This functionality allows organizations to maintain consistency across multiple sites while minimizing duplication of effort in setup and configuration.
- Benefits: By leveraging site scaffolding and cloning capabilities, organizations can accelerate website development and deployment processes, reduce the risk of errors, and ensure consistency in design, functionality, and branding across their digital properties. Additionally, these features promote scalability and flexibility, enabling seamless expansion and management of multisite environments.
What is going to change with Headless SXA?
| SXA on Prem | SXA on Prem | XM Cloud | |
| MVC | Headless | Headless | |
| Adding cookies warning message to sites | Yes | No | No |
| Asset optimizer | Yes | No | No |
| Available renderings | Same as previous version | ImageLink ListNavigationPage ContentPromoRich TextTitleContainer | ImageLink ListNavigationPage ContentPromoRich TextTitleContainerColumn SplitterRow Splitter |
| Cache settings | Yes | Yes | Yes |
| Configurable security for tenants and sites | Yes | Yes | Yes |
| Content Tagging | Yes | Yes | Yes |
| Creative Exchange | Yes | No | No |
| Custom SXA login page | Yes | No | No |
| Delegated areas, multisite feature (shared site) | Yes | Yes | Yes |
| Error handling | Yes | Yes | Yes |
| Grid layout (placeholder restrictions, page Branches) | Yes | Yes | Yes |
| JSON data modelling | Yes | No | No |
| Page and partial designs | Yes | Yes | Yes |
| Redirect map and redirect Items | Yes | Yes (limited) | Yes (limited) |
| Rendering host (SXA Initializer) | No | No | Yes |
| Rendering variants | Yes | Yes (limited) | Yes (limited) |
| Site-specific standard values | Yes | Yes | Yes |
| Site metadata | Yes | No | No |
| Sitemap | Yes | Yes | Yes |
| Styles | Yes | Yes | Yes |
| Themes | Yes | No | No |
| Workflows | Yes | Yes | Yes |
| Workflows for data sources | Yes | Yes | Yes |
So, what now?
As you can see, many of things that we came to love that we came to love with traditional SXA will no longer be available in Headless SXA. While this may seem like a step backwards at first glance, Sitecore’s decision here to slim down SXA is not only intentional, but it’s necessary. Keep an eye out for an upcoming blog post where we’ll dig into SXA in the new headless world and explore what it might look like to migrate from “traditional” SXA to Headless SXA.
Resources:
https://doc.sitecore.com/xp/en/developers/sxa/102/sitecore-experience-accelerator/headless.html
Sitecore Saga 