Chore/vtex cdn cache optimization

vtex/middleware.ts

@@ -1,10 +1,16 @@
 import { getCookies } from "std/http/cookie.ts";
+import { PAGE_CACHE_ALLOWED_KEY, PAGE_DIRTY_KEY } from "@deco/deco/blocks";
 import { AppMiddlewareContext } from "./mod.ts";
 import {
   getISCookiesFromBag,
   setISCookiesBag,
 } from "./utils/intelligentSearch.ts";
-import { getSegmentFromBag, setSegmentBag } from "./utils/segment.ts";
+import {
+  getSegmentFromBag,
+  isCacheableSegment,
+  setSegmentBag,
+} from "./utils/segment.ts";
+import { VTEX_ID_CLIENT_COOKIE } from "./utils/vtexId.ts";
 
 export const middleware = (
   _props: unknown,
@@ -13,17 +19,32 @@ export const middleware = (
 ) => {
   const segment = getSegmentFromBag(ctx);
   const isCookies = getISCookiesFromBag(ctx);
+  const cookies = getCookies(req.headers);
+
+  if (!isCookies) {
+    setISCookiesBag(cookies, ctx);
+  }
 
-  if (!isCookies || !segment) {
-    const cookies = getCookies(req.headers);
+  if (!segment) {
+    setSegmentBag(cookies, req, ctx);
+  }
 
-    if (!isCookies) {
-      setISCookiesBag(cookies, ctx);
-    }
+  const isLoggedIn = Boolean(
+    cookies[VTEX_ID_CLIENT_COOKIE] ||
+    cookies[`${VTEX_ID_CLIENT_COOKIE}_${ctx.account}`]
+  );
+
+  const cacheable = isCacheableSegment(ctx) && !isLoggedIn;
+
+  // PAGE_DIRTY_KEY: marks page dirty for section-level caching and other consumers
+  if (!cacheable) {
+    ctx.bag.set(PAGE_DIRTY_KEY, true);
+    ctx.response.headers.set("Cache-Control", "no-store, no-cache, must-revalidate");
+  }
 
-    if (!segment) {
-      setSegmentBag(cookies, req, ctx);
-    }
+  // PAGE_CACHE_ALLOWED_KEY: opts in to CDN page caching (VTEX-only)
+  if (cacheable) {
+    ctx.bag.set(PAGE_CACHE_ALLOWED_KEY, true);
   }
 
   return ctx.next!();

vtex/sections/Analytics/Vtex.tsx

@@ -4,20 +4,54 @@ import {
   SelectItemEvent,
 } from "../../../commerce/types.ts";
 import { AppContext } from "../../mod.ts";
-import { getISCookiesFromBag } from "../../utils/intelligentSearch.ts";
+import {
+  ANONYMOUS_COOKIE,
+  SESSION_COOKIE,
+} from "../../utils/intelligentSearch.ts";
 import { SPEvent } from "../../utils/types.ts";
 import { type SectionProps } from "@deco/deco";
 import { useScriptAsDataURI } from "@deco/deco/hooks";
-interface ISCookies {
-  // deno-lint-ignore no-explicit-any
-  anonymous: any;
-  // deno-lint-ignore no-explicit-any
-  session: any;
-}
-const snippet = (account: string, agent: string, cookies: ISCookies | null) => {
+
+const ONE_YEAR_SECS = 365 * 24 * 3600;
+const THIRTY_MIN_SECS = 30 * 60;
+
+const getCookie = (name: string): string | null => {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+  return match ? match[1] : null;
+};
+
+const setCookie = (name: string, value: string, maxAge: number) => {
+  document.cookie =
+    `${name}=${value};path=/;max-age=${maxAge};secure;SameSite=Lax`;
+};
+
+const getOrCreateISCookies = () => {
+  let anonymous = getCookie(ANONYMOUS_COOKIE);
+  if (!anonymous) {
+    anonymous = crypto.randomUUID();
+    setCookie(ANONYMOUS_COOKIE, anonymous, ONE_YEAR_SECS);
+  }
+
+  let session = getCookie(SESSION_COOKIE);
+  if (!session) {
+    session = crypto.randomUUID();
+  }
+  // Always re-set session cookie to simulate sliding expiration
+  setCookie(SESSION_COOKIE, session, THIRTY_MIN_SECS);
+
+  return { anonymous, session };
+};
+
+const snippet = (account: string) => {
+  const cookies = getOrCreateISCookies();
+
   const url = new URL(globalThis.location.href);
   const isSearch = url.searchParams.get("q");
   const apiUrl = `https://sp.vtex.com/event-api/v1/${account}/event`;
+  const baseProps = {
+    agent: navigator.userAgent,
+    ...cookies,
+  };
   const eventFetch = (props: SPEvent) => {
     fetch(apiUrl, {
       method: "POST",
@@ -30,10 +64,6 @@ const snippet = (account: string, agent: string, cookies: ISCookies | null) => {
       },
     });
   };
-  const baseProps = {
-    agent,
-    ...cookies,
-  };
   // deno-lint-ignore no-explicit-any
   function isSelectItemEvent(event: any): event is SelectItemEvent {
     return event.name === "select_item";
@@ -92,21 +122,18 @@ const snippet = (account: string, agent: string, cookies: ISCookies | null) => {
   });
 };
 export default function VtexAnalytics(
-  { account, agent, cookies }: SectionProps<typeof loader>,
+  { account }: SectionProps<typeof loader>,
 ) {
   return (
     <script
       type="text/javascript"
       defer
-      src={useScriptAsDataURI(snippet, account, agent, cookies)}
+      src={useScriptAsDataURI(snippet, account)}
     />
   );
 }
-export const loader = (_props: unknown, req: Request, ctx: AppContext) => {
-  const cookies = getISCookiesFromBag(ctx);
+export const loader = (_props: unknown, _req: Request, ctx: AppContext) => {
   return {
     account: ctx.account,
-    agent: req.headers.get("user-agent") || "deco-sites/apps",
-    cookies,
   };
 };

vtex/utils/intelligentSearch.ts

@@ -1,4 +1,3 @@
-import { setCookie } from "std/http/mod.ts";
 import { AppContext } from "../mod.ts";
 import { STALE } from "../../utils/fetch.ts";
 import type {
@@ -100,28 +99,10 @@ export const setISCookiesBag = (
 
   if (!anonymous) {
     anonymous = crypto.randomUUID();
-
-    setCookie(ctx.response.headers, {
-      value: anonymous,
-      name: ANONYMOUS_COOKIE,
-      path: "/",
-      secure: true,
-      httpOnly: true,
-      maxAge: 365 * 24 * 3600,
-    });
   }
 
   if (!session) {
     session = crypto.randomUUID();
-
-    setCookie(ctx.response.headers, {
-      value: session,
-      name: SESSION_COOKIE,
-      path: "/",
-      secure: true,
-      httpOnly: true,
-      maxAge: 30 * 60,
-    });
   }
 
   ctx?.bag.set(IS_ANONYMOUS, anonymous);

vtex/utils/segment.ts

@@ -61,6 +61,26 @@ export const isAnonymous = (
     !regionId;
 };
 
+/**
+ * Checks if the segment is cacheable for CDN purposes.
+ * By default, uses isAnonymous (UTMs affect cacheability because prices
+ * can vary by utm_source). With removeUTMFromCacheKey, UTMs are ignored
+ * (opt-in for stores that don't vary prices by UTM).
+ */
+export const isCacheableSegment = (ctx: AppContext) => {
+  const payload = getSegmentFromBag(ctx)?.payload;
+  if (payload?.channelPrivacy === "private") return false;
+
+  if (ctx.advancedConfigs?.removeUTMFromCacheKey) {
+    if (!payload) return true;
+    const { campaigns, channel, priceTables, regionId } = payload;
+    return !campaigns &&
+      (!channel || isDefautSalesChannel(ctx, channel)) &&
+      !priceTables && !regionId;
+  }
+  return isAnonymous(ctx);
+};
+
 const setSegmentInBag = (ctx: AppContext, data: WrappedSegment) =>
   ctx?.bag?.set(SEGMENT, data);
 
@@ -223,24 +243,28 @@ export const setSegmentBag = (
   const token = serialize(segment);
   setSegmentInBag(ctx, { payload: segment, token });
 
-  // If the user came from a sales channel in the URL, we set the cookie
-  if (segmentFromRequest.channel) {
-    setCookie(ctx.response.headers, {
-      value: `sc=${segmentFromRequest.channel}`,
-      name: SALES_CHANNEL_COOKIE,
-      path: "/",
-      secure: true,
-    });
-  }
+  // Skip Set-Cookie when the segment only differs by UTMs.
+  // UTMs don't affect page content, so the response can still be cached.
+  // Only set cookies when content-affecting fields differ (campaigns,
+  // non-default sales channel, price tables, region).
+  if (!isCacheableSegment(ctx)) {
+    if (segmentFromRequest.channel) {
+      setCookie(ctx.response.headers, {
+        value: `sc=${segmentFromRequest.channel}`,
+        name: SALES_CHANNEL_COOKIE,
+        path: "/",
+        secure: true,
+      });
+    }
 
-  // Avoid setting cookie when segment from request matches the one generated
-  if (vtex_segment !== token) {
-    setCookie(ctx.response.headers, {
-      value: token,
-      name: SEGMENT_COOKIE_NAME,
-      path: "/",
-      secure: true,
-      httpOnly: true,
-    });
+    if (vtex_segment !== token) {
+      setCookie(ctx.response.headers, {
+        value: token,
+        name: SEGMENT_COOKIE_NAME,
+        path: "/",
+        secure: true,
+        httpOnly: true,
+      });
+    }
   }
 };

website/matchers/device.ts

@@ -40,3 +40,5 @@ const MatchDevice = (
   return devices.includes(device);
 };
 export default MatchDevice;
+
+export const cacheable = true;

website/matchers/environment.ts

@@ -19,3 +19,5 @@ const MatchEnvironment = ({ environment }: Props) => {
 };
 
 export default MatchEnvironment;
+
+export const cacheable = true;

website/matchers/host.ts

@@ -19,3 +19,5 @@ const MatchHost = ({ includes, match }: Props, { request }: MatchContext) => {
   return regexMatch && includesFound;
 };
 export default MatchHost;
+
+export const cacheable = true;

website/matchers/pathname.ts

@@ -71,3 +71,5 @@ const MatchPathname = (props: Props, { request }: MatchContext) => {
   return props.case.negate ? !result : result;
 };
 export default MatchPathname;
+
+export const cacheable = true;

website/matchers/queryString.ts

@@ -122,3 +122,5 @@ const MatchQueryString = (props: Props, { request }: MatchContext) => {
   return matches;
 };
 export default MatchQueryString;
+
+export const cacheable = true;

website/matchers/site.ts

@@ -14,3 +14,5 @@ const MatchSite = ({ siteId }: Props, { siteId: currSiteId }: MatchContext) => {
   return siteId === currSiteId;
 };
 export default MatchSite;
+
+export const cacheable = true;