@sitecore-jss/sitecore-jss-nextjs 22.0.0-canary.38 → 22.0.0-canary.42

package/dist/esm/editing/editing-data-service.js

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { QUERY_PARAM_EDITING_SECRET } from './constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { editingDataDiskCache } from './editing-data-cache';
 import { getJssEditingSecret } from '../utils/utils';
-export const QUERY_PARAM_EDITING_SECRET = 'secret';
 /**
  * Unique key generator.
  * Need more than just the item GUID since requests are made "live" during editing in EE.
@@ -93,13 +93,14 @@ export class ServerlessEditingDataService {
      * @param {string} serverUrl The server url to use for subsequent data API requests
      * @returns {Promise} The {@link EditingPreviewData} containing the generated key and serverUrl to use for retrieval
      */
-    setEditingData(data, serverUrl) {
+    setEditingData(data, serverUrl, params) {
         return __awaiter(this, void 0, void 0, function* () {
             const key = this.generateKey(data);
-            const url = this.getUrl(serverUrl, key);
+            const url = this.getUrl(serverUrl, key, params);
             const previewData = {
                 key,
                 serverUrl,
+                params,
             };
             debug.editing('storing editing data for %o: %o', previewData, data);
             return this.dataFetcher.put(url, data).then(() => {
@@ -118,20 +119,27 @@ export class ServerlessEditingDataService {
             if (!(editingPreviewData === null || editingPreviewData === void 0 ? void 0 : editingPreviewData.serverUrl)) {
                 return undefined;
             }
-            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key);
+            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key, editingPreviewData.params);
             debug.editing('retrieving editing data for %o', previewData);
             return this.dataFetcher.get(url).then((response) => {
                 return response.data;
             });
         });
     }
-    getUrl(serverUrl, key) {
+    getUrl(serverUrl, key, params) {
         var _a;
         // Example URL format:
         //  http://localhost:3000/api/editing/data/52961eea-bafd-5287-a532-a72e36bd8a36-qkb4e3fv5x?secret=1234secret
         const apiRoute = (_a = this.apiRoute) === null || _a === void 0 ? void 0 : _a.replace('[key]', key);
         const url = new URL(apiRoute, serverUrl);
         url.searchParams.append(QUERY_PARAM_EDITING_SECRET, getJssEditingSecret());
+        if (params) {
+            for (const key in params) {
+                if ({}.hasOwnProperty.call(params, key)) {
+                    url.searchParams.append(key, params[key]);
+                }
+            }
+        }
         return url.toString();
     }
 }

package/dist/esm/editing/editing-render-middleware.js

@@ -11,21 +11,25 @@ import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { EDITING_COMPONENT_ID, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { parse } from 'node-html-parser';
-import { editingDataService, QUERY_PARAM_EDITING_SECRET, } from './editing-data-service';
+import { editingDataService } from './editing-data-service';
+import { QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
+import { RenderMiddlewareBase } from './render-middleware';
 /**
  * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
  * which is required for Sitecore editing support.
  */
-export class EditingRenderMiddleware {
+export class EditingRenderMiddleware extends RenderMiddlewareBase {
     /**
      * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
      */
     constructor(config) {
         var _a, _b, _c, _d;
+        super();
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
             const { method, query, body, headers } = req;
+            const startTimestamp = Date.now();
             debug.editing('editing render middleware start: %o', {
                 method,
                 query,
@@ -52,21 +56,28 @@ export class EditingRenderMiddleware {
                 const editingData = extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
+                // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
+                const params = this.getQueryParamsForPropagation(query);
                 // Stash for use later on (i.e. within getStatic/ServerSideProps).
                 // Note we can't set this directly in setPreviewData since it's stored as a cookie (2KB limit)
                 // https://nextjs.org/docs/advanced-features/preview-mode#previewdata-size-limits)
-                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl);
+                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl, params);
                 // Enable Next.js Preview Mode, passing our preview data (i.e. editingData cache key)
                 res.setPreviewData(previewData);
                 // Grab the Next.js preview cookies to send on to the render request
                 const cookies = res.getHeader('Set-Cookie');
-                // Make actual render request for page route, passing on preview cookies.
+                // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
-                const requestUrl = this.resolvePageUrl(serverUrl, editingData.path);
                 debug.editing('fetching page route for %s', editingData.path);
-                const queryStringCharacter = requestUrl.indexOf('?') === -1 ? '?' : '&';
+                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                for (const key in params) {
+                    if ({}.hasOwnProperty.call(params, key)) {
+                        requestUrl.searchParams.append(key, params[key]);
+                    }
+                }
+                requestUrl.searchParams.append('timestamp', Date.now().toString());
                 const pageRes = yield this.dataFetcher
-                    .get(`${requestUrl}${queryStringCharacter}timestamp=${Date.now()}`, {
+                    .get(requestUrl.toString(), {
                     headers: {
                         Cookie: cookies.join(';'),
                     },
@@ -81,7 +92,7 @@ export class EditingRenderMiddleware {
                 });
                 let html = pageRes.data;
                 if (!html || html.length === 0) {
-                    throw new Error(`Failed to render html for ${requestUrl}`);
+                    throw new Error(`Failed to render html for ${editingData.path}`);
                 }
                 // replace phkey attribute with key attribute so that newly added renderings
                 // show correct placeholders, so save and refresh won't be needed after adding each rendering
@@ -97,11 +108,14 @@ export class EditingRenderMiddleware {
                     // Handle component rendering. Extract component markup only
                     html = (_f = parse(html).getElementById(EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
                     if (!html)
-                        throw new Error(`Failed to render component for ${requestUrl}`);
+                        throw new Error(`Failed to render component for ${editingData.path}`);
                 }
                 const body = { html };
                 // Return expected JSON result
-                debug.editing('editing render middleware end: %o', { status: 200, body });
+                debug.editing('editing render middleware end in %dms: %o', Date.now() - startTimestamp, {
+                    status: 200,
+                    body,
+                });
                 res.status(200).json(body);
             }
             catch (err) {

package/dist/esm/editing/feaas-render-middleware.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { debug } from '@sitecore-jss/sitecore-jss';
+import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { getJssEditingSecret } from '../utils/utils';
+import { RenderMiddlewareBase } from './render-middleware';
+/**
+ * Middleware / handler for use in the feaas render Next.js API route (e.g. '/api/editing/feaas/render')
+ * which is required for Sitecore editing support.
+ */
+export class FEAASRenderMiddleware extends RenderMiddlewareBase {
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config) {
+        var _a;
+        super();
+        this.config = config;
+        this.defaultPageUrl = '/feaas/render';
+        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+            const { method, query, headers } = req;
+            const startTimestamp = Date.now();
+            debug.editing('feaas render middleware start: %o', {
+                method,
+                query,
+                headers,
+            });
+            if (method !== 'GET') {
+                debug.editing('invalid method - sent %s expected GET', method);
+                res.setHeader('Allow', 'GET');
+                return res.status(405).send(`<html><body>Invalid request method '${method}'</body></html>`);
+            }
+            // Validate secret
+            const secret = query[QUERY_PARAM_EDITING_SECRET];
+            if (secret !== getJssEditingSecret()) {
+                debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
+                return res.status(401).send('<html><body>Missing or invalid secret</body></html>');
+            }
+            try {
+                // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
+                const params = this.getQueryParamsForPropagation(query);
+                // Enable Next.js Preview Mode
+                res.setPreviewData({});
+                const queryParams = new URLSearchParams();
+                for (const key in params) {
+                    if ({}.hasOwnProperty.call(params, key)) {
+                        queryParams.append(key, params[key]);
+                    }
+                }
+                // Pass "feaasSrc" in case a FEAASComponent is being requested
+                if (query.feaasSrc) {
+                    queryParams.append('feaasSrc', query.feaasSrc);
+                }
+                const redirectUrl = this.pageUrl + (queryParams.toString() ? `?${queryParams.toString()}` : '');
+                debug.editing('redirecting to page route %s', redirectUrl);
+                debug.editing('feaas render middleware end in %dms', Date.now() - startTimestamp);
+                res.redirect(redirectUrl);
+            }
+            catch (err) {
+                const error = err;
+                console.info(
+                // eslint-disable-next-line quotes
+                "Hint: for non-standard server or Next.js route configurations, you may need to override the 'pageUrl' available on the 'FEAASRenderMiddleware' config.");
+                res.status(500).send(`<html><body>${error}</body></html>`);
+            }
+        });
+        this.pageUrl = (_a = config === null || config === void 0 ? void 0 : config.pageUrl) !== null && _a !== void 0 ? _a : this.defaultPageUrl;
+    }
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler() {
+        return this.handler;
+    }
+}

package/dist/esm/editing/index.js

@@ -2,3 +2,6 @@ export { EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware } from './editing-data-middleware';
 export { EditingRenderMiddleware, } from './editing-render-middleware';
 export { BasicEditingDataService, ServerlessEditingDataService, editingDataService, } from './editing-data-service';
+export { VercelEditingDataCache } from './vercel-editing-data-cache';
+export { FEAASRenderMiddleware } from './feaas-render-middleware';
+export { EditingConfigMiddleware, } from './editing-config-middleware';

package/dist/esm/editing/render-middleware.js

@@ -0,0 +1,23 @@
+import { QUERY_PARAM_PROTECTION_BYPASS_SITECORE, QUERY_PARAM_PROTECTION_BYPASS_VERCEL, } from './constants';
+/**
+ * Base class for middleware that handles pages and components rendering in Sitecore Editors.
+ */
+export class RenderMiddlewareBase {
+    constructor() {
+        /**
+         * Gets query parameters that should be passed along to subsequent requests (e.g. for deployment protection bypass)
+         * @param {Object} query Object of query parameters from incoming URL
+         * @returns Object of approved query parameters
+         */
+        this.getQueryParamsForPropagation = (query) => {
+            const params = {};
+            if (query[QUERY_PARAM_PROTECTION_BYPASS_SITECORE]) {
+                params[QUERY_PARAM_PROTECTION_BYPASS_SITECORE] = query[QUERY_PARAM_PROTECTION_BYPASS_SITECORE];
+            }
+            if (query[QUERY_PARAM_PROTECTION_BYPASS_VERCEL]) {
+                params[QUERY_PARAM_PROTECTION_BYPASS_VERCEL] = query[QUERY_PARAM_PROTECTION_BYPASS_VERCEL];
+            }
+            return params;
+        };
+    }
+}

package/dist/esm/editing/vercel-editing-data-cache.js

@@ -0,0 +1,44 @@
+import { createClient } from '@vercel/kv';
+import { debug } from '@sitecore-jss/sitecore-jss';
+/**
+ * Implementation of editing cache for Vercel deployments
+ * Uses Vercel KV database and client to store data
+ * Set TTL for cache data in constructor (default: 60 seconds)
+ */
+export class VercelEditingDataCache {
+    /**
+     * @param {string} redisUrl KV endpoint URL. Usually stored in process.env.KV_REST_API_URL
+     * @param {string} redisToken KV endpoint tokem. Usually stored in process.env.KV_REST_API_TOKEN
+     */
+    constructor(redisUrl, redisToken) {
+        this.defaultTtl = 120;
+        if (!redisUrl || !redisToken) {
+            throw Error('API URL or token are missing, ensure you have set the KV or Upstash storage correctly.');
+        }
+        this.redisCache = createClient({
+            url: redisUrl,
+            token: redisToken,
+        });
+    }
+    set(key, editingData) {
+        debug.editing(`Putting editing data for ${key} into redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .set(key, JSON.stringify(editingData), { ex: this.defaultTtl })
+                .then(() => resolve())
+                .catch((err) => reject(err));
+        });
+    }
+    get(key) {
+        debug.editing(`Getting editing data for ${key} from redis storage...`);
+        return new Promise((resolve, reject) => {
+            this.redisCache
+                .get(key)
+                .then((entry) => {
+                const result = (entry || undefined);
+                this.redisCache.expire(key, 0).then(() => resolve(result));
+            })
+                .catch((err) => reject(err));
+        });
+    }
+}

package/dist/esm/graphql/index.js

@@ -0,0 +1 @@
+export { DefaultRetryStrategy, GraphQLRequestClient, getEdgeProxyContentUrl, } from '@sitecore-jss/sitecore-jss/graphql';

package/dist/esm/index.js

@@ -1,25 +1,9 @@
-export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, } from '@sitecore-jss/sitecore-jss';
-// we will remove the root exports for these later
-// we cannot mark exports as deprected directly, so we're using this hack instead
-import { isEditorActive as isEditorActiveDep, resetEditorChromes as resetEditorChromesDep, resolveUrl as resolveUrlDep, tryParseEnvValue as tryParseEnvValueDep, } from '@sitecore-jss/sitecore-jss/utils';
-import { handleEditorFastRefresh as handleEditorFastRefreshDep, getPublicUrl as getPublicUrlDep, } from './utils';
-/** @deprecated use import from '@sitecore-jss/sitecore-jss-nextjs/utils' instead */
-const { isEditorActiveDep: isEditorActive, resetEditorChromesDep: resetEditorChromes, resolveUrlDep: resolveUrl, tryParseEnvValueDep: tryParseEnvValue, handleEditorFastRefreshDep: handleEditorFastRefresh, getPublicUrlDep: getPublicUrl, } = {
-    isEditorActiveDep,
-    resetEditorChromesDep,
-    resolveUrlDep,
-    tryParseEnvValueDep,
-    handleEditorFastRefreshDep,
-    getPublicUrlDep,
-};
-export { handleEditorFastRefresh, getPublicUrl };
-export { isEditorActive, resetEditorChromes, resolveUrl, tryParseEnvValue };
-export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';
+export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, debug, } from '@sitecore-jss/sitecore-jss';
+export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, getContentStylesheetLink, } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
-export { personalizeLayout, getPersonalizedRewrite, getPersonalizedRewriteData, normalizePersonalizedRewrite, CdpHelper, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
-export { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
+export { personalizeLayout, getPersonalizedRewrite, getPersonalizedRewriteData, normalizePersonalizedRewrite, CdpHelper, } from '@sitecore-jss/sitecore-jss/personalize';
 export { ComponentPropsService } from './services/component-props-service';
 export { DisconnectedSitemapService } from './services/disconnected-sitemap-service';
 export { GraphQLSitemapService, } from './services/graphql-sitemap-service';
@@ -31,4 +15,10 @@ export { RichText } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
 export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
-export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, getFEAASLibraryStylesheetLinks, File, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, } from '@sitecore-jss/sitecore-jss-react';
+import * as FEaaSWrapper from './components/FEaaSWrapper';
+import * as BYOCWrapper from './components/BYOCWrapper';
+export { FEaaSWrapper };
+export { BYOCWrapper };
+export { ComponentBuilder } from './ComponentBuilder';
+export { Context } from './context';
+export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, } from '@sitecore-jss/sitecore-jss-react';

package/dist/esm/middleware/index.js

@@ -1,3 +1,4 @@
+export { debug } from '@sitecore-jss/sitecore-jss';
 export { RedirectsMiddleware } from './redirects-middleware';
 export { PersonalizeMiddleware } from './personalize-middleware';
 export { MultisiteMiddleware } from './multisite-middleware';

package/dist/esm/middleware/middleware.js

@@ -1,7 +1,9 @@
+import { NextResponse } from 'next/server';
 export class MiddlewareBase {
     constructor(config) {
         this.config = config;
         this.SITE_SYMBOL = 'sc_site';
+        this.REWRITE_HEADER_NAME = 'x-sc-rewrite';
         this.defaultHostname = config.defaultHostname || 'localhost';
     }
     /**
@@ -15,8 +17,7 @@ export class MiddlewareBase {
     }
     excludeRoute(pathname) {
         var _a, _b;
-        return (pathname.includes('.') || // Ignore files
-            pathname.startsWith('/api/') || // Ignore Next.js API calls
+        return (pathname.startsWith('/api/') || // Ignore Next.js API calls
             pathname.startsWith('/sitecore/') || // Ignore Sitecore API calls
             pathname.startsWith('/_next') || // Ignore next service calls
             (((_a = this.config) === null || _a === void 0 ? void 0 : _a.excludeRoute) && ((_b = this.config) === null || _b === void 0 ? void 0 : _b.excludeRoute(pathname))));
@@ -63,4 +64,19 @@ export class MiddlewareBase {
         const hostname = this.getHostHeader(req) || this.defaultHostname;
         return this.config.siteResolver.getByHost(hostname);
     }
+    /**
+     * Create a rewrite response
+     * @param {string} rewritePath the destionation path
+     * @param {NextRequest} req the current request
+     * @param {NextResponse} res the current response
+     */
+    rewrite(rewritePath, req, res) {
+        // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
+        const rewriteUrl = req.nextUrl.clone();
+        rewriteUrl.pathname = rewritePath;
+        const response = NextResponse.rewrite(rewriteUrl, res);
+        // Share rewrite path with following executed middlewares
+        response.headers.set(this.REWRITE_HEADER_NAME, rewritePath);
+        return response;
+    }
 }

package/dist/esm/middleware/multisite-middleware.js

@@ -26,6 +26,7 @@ export class MultisiteMiddleware extends MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
+            const startTimestamp = Date.now();
             debug.multisite('multisite middleware start: %o', {
                 pathname,
                 language,
@@ -47,15 +48,16 @@ export class MultisiteMiddleware extends MiddlewareBase {
             const rewritePath = getSiteRewrite(pathname, {
                 siteName,
             });
-            // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
-            const rewriteUrl = req.nextUrl.clone();
-            rewriteUrl.pathname = rewritePath;
-            response = NextResponse.rewrite(rewriteUrl);
+            response = this.rewrite(rewritePath, req, response);
+            // default site cookie attributes
+            const defaultCookieAttributes = {
+                secure: true,
+                httpOnly: true,
+                sameSite: 'none',
+            };
             // Share site name with the following executed middlewares
-            response.cookies.set(this.SITE_SYMBOL, siteName);
-            // Share rewrite path with following executed middlewares
-            response.headers.set('x-sc-rewrite', rewritePath);
-            debug.multisite('multisite middleware end: %o', {
+            response.cookies.set(this.SITE_SYMBOL, siteName, defaultCookieAttributes);
+            debug.multisite('multisite middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 siteName,
                 headers: this.extractDebugHeaders(response.headers),
@@ -80,4 +82,8 @@ export class MultisiteMiddleware extends MiddlewareBase {
             }
         });
     }
+    excludeRoute(pathname) {
+        // ignore files
+        return pathname.includes('.') || super.excludeRoute(pathname);
+    }
 }

package/dist/esm/middleware/personalize-middleware.js

@@ -7,10 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { NextResponse, userAgent } from 'next/server';
-import { GraphQLPersonalizeService, CdpService, getPersonalizedRewrite, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
-import { debug, NativeDataFetcher } from '@sitecore-jss/sitecore-jss';
+import { NextResponse } from 'next/server';
+import { GraphQLPersonalizeService, getPersonalizedRewrite, } from '@sitecore-jss/sitecore-jss/personalize';
+import { debug } from '@sitecore-jss/sitecore-jss';
 import { MiddlewareBase } from './middleware';
+import { init, personalize } from '@sitecore-cloudsdk/personalize/server';
 /**
  * Middleware / handler to support Sitecore Personalize
  */
@@ -25,15 +26,16 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
-            let browserId = this.getBrowserId(req);
+            const startTimestamp = Date.now();
+            const timeout = this.config.cdpConfig.timeout;
+            // Response will be provided if other middleware is run before us (e.g. redirects)
+            let response = res || NextResponse.next();
             debug.personalize('personalize middleware start: %o', {
                 pathname,
                 language,
                 hostname,
-                browserId,
+                headers: this.extractDebugHeaders(req.headers),
             });
-            // Response will be provided if other middleware is run before us (e.g. redirects)
-            let response = res || NextResponse.next();
             if (this.config.disabled && this.config.disabled(req, response)) {
                 debug.personalize('skipped (personalize middleware is disabled)');
                 return response;
@@ -44,7 +46,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
                 return response;
             }
-            const site = this.getSite(req, res);
+            const site = this.getSite(req, response);
             // Get personalization info from Experience Edge
             const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
             if (!personalizeInfo) {
@@ -56,20 +58,24 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (no personalization configured)');
                 return response;
             }
-            if (!browserId) {
-                browserId = yield this.cdpService.generateBrowserId();
-                if (!browserId) {
-                    debug.personalize('skipped (browser id generation failed)');
-                    return response;
-                }
-            }
-            // Execute targeted experience in CDP
-            const { ua } = userAgent(req);
+            yield this.initPersonalizeServer({
+                hostname,
+                siteName: site.name,
+                request: req,
+                response,
+            });
             const params = this.getExperienceParams(req);
-            const pointOfSale = this.config.getPointOfSale
-                ? this.config.getPointOfSale(site, language)
-                : PosResolver.resolve(site, language);
-            const variantId = yield this.cdpService.executeExperience(personalizeInfo.contentId, browserId, ua, pointOfSale, params);
+            debug.personalize('executing experience for %s %o', personalizeInfo.contentId, params);
+            let variantId;
+            // Execute targeted experience in Personalize SDK
+            // eslint-disable-next-line no-useless-catch
+            try {
+                const personalization = yield this.personalize({ personalizeInfo, params, language, timeout }, req);
+                variantId = personalization.variantId;
+            }
+            catch (error) {
+                throw error;
+            }
             if (!variantId) {
                 debug.personalize('skipped (no variant identified)');
                 return response;
@@ -82,22 +88,12 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const basePath = (res === null || res === void 0 ? void 0 : res.headers.get('x-sc-rewrite')) || pathname;
             // Rewrite to persononalized path
             const rewritePath = getPersonalizedRewrite(basePath, { variantId });
-            // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
-            const rewriteUrl = req.nextUrl.clone();
-            rewriteUrl.pathname = rewritePath;
-            response = NextResponse.rewrite(rewriteUrl);
+            response = this.rewrite(rewritePath, req, response);
             // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
             // See https://github.com/vercel/next.js/issues/32727
             response.headers.set('x-middleware-cache', 'no-cache');
-            // Share rewrite path with following executed middlewares
-            response.headers.set('x-sc-rewrite', rewritePath);
-            // Set browserId cookie on the response
-            this.setBrowserId(response, browserId);
-            // Share site name with the following executed middlewares
-            response.cookies.set(this.SITE_SYMBOL, site.name);
-            debug.personalize('personalize middleware end: %o', {
+            debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
-                browserId,
                 headers: this.extractDebugHeaders(response.headers),
             });
             return response;
@@ -105,15 +101,6 @@ export class PersonalizeMiddleware extends MiddlewareBase {
         // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
         // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
         this.personalizeService = new GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
-        // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
-        this.cdpService = new CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
-                const fetcher = new NativeDataFetcher({
-                    debugger: debug.personalize,
-                    timeout,
-                    headers,
-                });
-                return (url, data) => fetcher.fetch(url, data);
-            } }));
     }
     /**
      * Gets the Next.js middleware handler with error handling
@@ -131,28 +118,47 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             }
         });
     }
-    get browserIdCookieName() {
-        // Each user should have saved identifier to connect between session, CDP uses bid cookies + local storage
-        return `BID_${this.config.cdpConfig.clientKey}`;
+    initPersonalizeServer({ hostname, siteName, request, response, }) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield init(request, response, {
+                sitecoreEdgeUrl: this.config.cdpConfig.sitecoreEdgeUrl,
+                sitecoreEdgeContextId: this.config.cdpConfig.sitecoreEdgeContextId,
+                siteName,
+                cookieDomain: hostname,
+                enableServerCookie: true,
+            });
+        });
     }
-    getBrowserId(req) {
+    personalize({ params, personalizeInfo, language, timeout, }, request) {
         var _a;
-        return ((_a = req.cookies.get(this.browserIdCookieName)) === null || _a === void 0 ? void 0 : _a.value) || undefined;
-    }
-    setBrowserId(res, browserId) {
-        const expiryDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
-        const options = { expires: expiryDate, secure: true };
-        res.cookies.set(this.browserIdCookieName, browserId, options);
+        return __awaiter(this, void 0, void 0, function* () {
+            const personalizationData = {
+                channel: this.config.cdpConfig.channel || 'WEB',
+                currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USD',
+                friendlyId: personalizeInfo.contentId,
+                params,
+                language,
+            };
+            return (yield personalize(request, personalizationData, { timeout }));
+        });
     }
     getExperienceParams(req) {
+        const utm = {
+            campaign: req.nextUrl.searchParams.get('utm_campaign') || undefined,
+            content: req.nextUrl.searchParams.get('utm_content') || undefined,
+            medium: req.nextUrl.searchParams.get('utm_medium') || undefined,
+            source: req.nextUrl.searchParams.get('utm_source') || undefined,
+        };
         return {
-            referrer: req.referrer,
-            utm: {
-                campaign: req.nextUrl.searchParams.get('utm_campaign'),
-                content: req.nextUrl.searchParams.get('utm_content'),
-                medium: req.nextUrl.searchParams.get('utm_medium'),
-                source: req.nextUrl.searchParams.get('utm_source'),
-            },
+            // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
+            // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
+            // used as a fallback
+            referrer: req.headers.get('referer') || req.referrer,
+            utm: utm,
         };
     }
+    excludeRoute(pathname) {
+        // ignore files
+        return pathname.includes('.') || super.excludeRoute(pathname);
+    }
 }