[templates/nextjs-xmcloud][sitecore-jss] Update render process in normal mode for component level personalization

CHANGELOG.md

@@ -25,6 +25,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss]` _GraphQLRequestClient_ now can accept custom 'headers' in the constructor or via _createClientFactory_ ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[templates/nextjs]` Removed cors header for API endpoints from _lib/next-config/plugins/cors-header_ plugin since cors is handled by API handlers / middlewares ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[sitecore-jss-nextjs]` Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) ([#1832](https://github.com/Sitecore/jss/pull/1832))
+* `[templates/nextjs-xmcloud]` `[sitecore-jss]` Updates the render process in normal mode for component level personalization. ([#1844](https://github.com/Sitecore/jss/pull/1844))
 * `[sitecore-jss]` `[nextjs-xmcloud]` DictionaryService can now use a `site` GraphQL query instead of `search` one to improve performance. This is currently only available for XMCloud deployments and is enabled with `nextjs-xmcloud` add-on by default ([#1804](https://github.com/Sitecore/jss/pull/1804))
 
 ### 🛠 Breaking Change

docs/upgrades/unreleased.md

@@ -177,3 +177,18 @@
         }
         ...
     ```
+
+* To enable AB testing and component level personalization support in JSS, ensure _componentVariantIds_ are passed to _personalizeLayout_ function call:
+
+  ```ts
+  // Get variant(s) for personalization (from path)
+  const personalizeData = getPersonalizedRewriteData(path);
+
+  // Modify layoutData to use specific variant(s) instead of default
+  // This will also set the variantId on the Sitecore context so that it is accessible here
+  personalizeLayout(
+    props.layoutData,
+    personalizeData.variantId,
+    personalizeData.componentVariantIds
+  );
+  ```

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/personalize.ts

@@ -16,12 +16,16 @@ class PersonalizePlugin implements Plugin {
         ? context.params.path.join('/')
         : context.params.path ?? '/';
 
-    // Get variant for personalization (from path)
+    // Get variant(s) for personalization (from path)
     const personalizeData = getPersonalizedRewriteData(path);
 
-    // Modify layoutData to use specific variant instead of default
+    // Modify layoutData to use specific variant(s) instead of default
     // This will also set the variantId on the Sitecore context so that it is accessible here
-    personalizeLayout(props.layoutData, personalizeData.variantId);
+    personalizeLayout(
+      props.layoutData,
+      personalizeData.variantId,
+      personalizeData.componentVariantIds
+    );
 
     return props;
   }