Yesterday, January 18, 2024, the Sitecore JSS team released a huge update to Sitecore JSS with their new version 21.6. It not only is for XM Cloud, but also for headless on-prem or managed cloud Sitecore projects. It sure has some nice features and changes that I want to address in the blogpost.
New Features & Improvements
There are a lot of new features and improvements:
- A new XM Cloud add-on that simplifies the integration of event tracking, personalization, and other features of front-end applications.
- Support for Sitecore Context, a simplified way of handling your front-end integration with XM Cloud. Sitecore Context includes all the variables you need for your integration, such as site identifiers and Experience Edge endpoints. Instead of passing a multitude of environment variables, you now only include the Context ID variable, and the other variables are handled automatically.
- Personalize integration that uses the Cloud SDK and is based on the Context ID.
- Enhanced support for BYOC (Enable client-only BYOC component imports). Client-only components can be imported through src/byoc/index.client.ts. Hybrid (server render with client hydration) components can be imported through src/byoc/index.hybrid.ts. BYOC scaffold logic is also moved from nextjs-sxa addon into base template.
- The Cloud SDK, a new developer tool that brings the power of CDP and Personalize to XM Cloud.
- Changes to the Next.js Personalize integration. The integration now uses the new Cloud SDK.
- Removed the nextjs-personalize add-on; Personalize integration is now part of the XM Cloud add-on.
- Removed these environment variables, using Context ID instead: NEXT_PUBLIC_CDP_TENANT_URL, NEXT_PUBLIC_CDP_CLIENT_KEY, NEXT_PUBLIC_CDP_POINTOFSALE
- Changes to how event configuration is handled: these are now controlled using the Cloud SDK.
- Removed support for custom Point of Sale resolution.
- The JSS GraphQL Layout and Dictionary services now use Sitecore Context ID, if available, instead of the Sitecore API Key.
- Switch from using JSS_APP_NAME to SITECORE_SITE_NAME – environment and config variables in React, Vue, Angular templates as well as ssr node proxy apps templates have been renamed.
- Sitecore Edge Platform and Context support:
- Introducing the clientFactory property. This property can be utilized by GraphQL-based services, the previously used endpoint and apiKey properties are deprecated. The clientFactory serves as the central hub for executing GraphQL requests within the application.
- New SITECORE_EDGE_CONTEXT_ID environment variable has been added.
- The JSS_APP_NAME environment variable has been updated and is now referred to as SITECORE_SITE_NAME.
- Import SitecoreForm component into sample nextjs app
- Deployment Protection Bypass support for editing integration.
- Support for both ‘published’ and ‘staged’ revisions of FEAAS stylesheets/themes based on Sitecore Edge Platform and Context
- The GraphQLRequestClient import from @sitecore-jss/sitecore-jss-nextjs is deprecated, use import from @sitecore-jss/sitecore-jss-nextjs/graphql submodule instead
- Introduced nextjs-xmcloud initializer template. This will include all base XM Cloud features, including Personalize, FEaaS, BYOC, Sitecore Edge Platform and Context support.
- Page state (preview, edit, normal) is available through shared context. This allows access to the state for integrations such as CloudSDK and FEAAS.
Bug Fixes
This release also fixed some bugs
- Fix making a fetch to a nextjs api route in an editing environment, by adding additional variable publicUrl in runtime config
- Fix site info fetch errors (now skipped) on XM Cloud rendering/editing host builds.
- Fix double registration of BYOC components
- SDK initialization rejections are now correctly handled. Errors should no longer occur after getSDK() promises resolve when they shouldn’t (for example, getting Events SDK in development environment)
There are also some breaking changes introduced, so for more info on this release: check out the releases page.
Updated XM Cloud JSS 21.6 documentation
The Sitecore XM Cloud part of the JSS documentation has been completely restructured to now support two versions of JSS: 21.6 (default, latest version), and 21.5. The overal developer documentation can be found here.
And that’s it, start upgrading your JSS versions in your projects!
Happy Sitecore-ing!
–Robbert
