SitecoreContext series
This blogpost is part of a short series on the SitecoreContext object
- Part 1 – Sitecore JSS: Exploring the SitecoreContext Object
- Part 2 – Sitecore JSS: Exploring the useSitecoreContext Hook
- Part 3 – Sitecore JSS: Exploring the withSitecoreContext higher-order component (HOC)
Over the past year, I’ve been involved in developing headless Sitecore solutions for a multi-site Sitecore DXP platform. Coming from a background in back-end development (mostly doing .NET/C# development), I can certainly say that doing headless Sitecore development has a learning curve, especially when it comes to using new front-end frameworks like React and Next.js, as well as the Sitecore JavaScript Services (JSS) framework. Working with JSS can be overwhelming at times, as it involves learning new concepts and frameworks, as well as integrating them with Sitecore. However, the benefits of using JSS for headless Sitecore development are significant. With JSS, you can build decoupled, performant, and scalable front-end applications that can be integrated with Sitecore, allowing you to leverage the power of Sitecore’s CMS capabilities while building modern web applications.
In today’s blogpost I want to deep dive into the SitecoreContext object. But before we do that let’s first have a look at Sitecore JSS.
Sitecore JSS is a JavaScript framework that allows developers to decouple the front-end presentation of a website from the content management functionality of the Sitecore Experience Platform. This enables several benefits, including greater scalability and flexibility, the ability to use modern front-end frameworks such as React, Angular, and Vue, and a more agile development process. Additionally, Sitecore JSS allows for better cross-platform compatibility, making it possible to deliver a consistent user experience across multiple devices and channels.
One object that can be useful while developing Sitecore JSS apps is the SitecoreContext object. The SitecoreContext object provides context-aware data to components within your Sitecore JSS app, and can for example be useful when you need to modify the behavior of the JSS app/website based on the current context. The SitecoreContext object contains data about the current request and the Sitecore environment and is populated by the Sitecore Layout Service.
Some of the properties that you can access on the SitecoreContext object include:
- ‘itemId’ – This property is the ID of the current Sitecore item.
- ‘language’ – This property is the language of the current Sitecore item.
- ‘pageEditing’ – This property is a boolean, provided by the Sitecore Layout Service, indicating whether the current route is accessed with the Experience Editor.
- ‘pageState’ – This property is like the pageEditing property, but then a string with the values ‘normal’, ‘preview’, or ‘edit’.
- ‘route’ – This property contains the route data returned from the Sitecore Layout Service, for example name, displayName, fields, and much more of the current route item
- ‘site’ – This property is provided by the Sitecore Layout Service, and contains an object containing the name of the current Sitecore site context
- ‘visitorIdentificationTimestamp’ – This property is used for personalization and contains a timestamp
NOTE: Properties and their values will vary depending on the current request and the Sitecore environment.
Since Sitecore always has been extremely flexible and adjustable, also with Sitecore JSS the SitecoreContext object props can be extended. The getLayoutServiceContext pipeline lets you add custom data to the context, see Extending context data returned by the Layout Service in the Sitecore documentation.
In the next blog posts we’re going to have a look how we can access the SitecoreContext in our Sitecore JSS Next.js components. And it can be done in various ways!
Happy Sitecoring!
–Robbert
