@decocms/start 0.23.0 → 0.24.0

package/.cursor/skills/deco-cms-route-config/SKILL.md

@@ -41,41 +41,72 @@ The catch-all route handles all CMS-managed pages (PDP, PLP, institutional pages
 
 ```typescript
 // src/routes/$.tsx
-import { createFileRoute, notFound } from "@tanstack/react-router";
-import { cmsRouteConfig, NotFoundPage } from "@decocms/start/routes";
+import { createFileRoute } from "@tanstack/react-router";
+import { cmsRouteConfig, loadDeferredSection } from "@decocms/start/routes";
 import { DecoPageRenderer } from "@decocms/start/hooks";
+import type { ResolvedSection, DeferredSection } from "@decocms/start/cms";
+import type { CacheProfile } from "@decocms/start/sdk/cacheHeaders";
+import { cacheHeaders, routeCacheDefaults } from "@decocms/start/sdk/cacheHeaders";
 
-const config = cmsRouteConfig({
+const routeConfig = cmsRouteConfig({
   siteName: "My Store",
   defaultTitle: "My Store - Default Title",
   ignoreSearchParams: ["skuId"],
 });
 
+type PageData = {
+  resolvedSections: ResolvedSection[];
+  deferredSections: DeferredSection[];
+  cacheProfile: CacheProfile;
+  name: string;
+  path: string;
+  params: Record<string, string>;
+} | null;
+
 export const Route = createFileRoute("/$")({
-  loaderDeps: config.loaderDeps,
-  loader: async (ctx) => {
-    const page = await config.loader(ctx);
-    if (!page) throw notFound();
-    return page;
+  ...routeCacheDefaults("listing"),
+  loaderDeps: routeConfig.loaderDeps,
+  loader: routeConfig.loader as any,
+  headers: ({ loaderData }) => {
+    const data = loaderData as PageData;
+    return cacheHeaders(data?.cacheProfile ?? "listing");
+  },
+  head: ({ loaderData }) => {
+    const data = loaderData as PageData;
+    return {
+      meta: [
+        {
+          title: data?.name
+            ? `${data.name} | My Store`
+            : "My Store - Default Title",
+        },
+      ],
+    };
   },
   component: CmsPage,
   notFoundComponent: NotFoundPage,
-  staleTime: config.staleTime,
-  gcTime: config.gcTime,
-  headers: config.headers,
-  head: config.head,
 });
 
 function CmsPage() {
-  const page = Route.useLoaderData();
+  const data = Route.useLoaderData() as PageData;
+  const { _splat } = Route.useParams();
+  const actualPath = `/${_splat ?? ""}`;
+
+  if (!data) return <NotFoundPage />;
+
   return (
-    <div>
-      <DecoPageRenderer sections={page.resolvedSections} />
-    </div>
+    <DecoPageRenderer
+      sections={data.resolvedSections ?? []}
+      deferredSections={data.deferredSections ?? []}
+      pagePath={actualPath}
+      loadDeferredSectionFn={(d) => loadDeferredSection({ data: d }) as Promise<ResolvedSection | null>}
+    />
   );
 }
 ```
 
+**CRITICAL**: The `...routeCacheDefaults("listing")` spread is essential. Without it, every SPA navigation triggers a full server re-fetch even when the data was just loaded seconds ago. This is the most common cause of perceived slow navigation.
+
 ### `cmsRouteConfig` Options
 
 ```typescript
@@ -152,27 +183,41 @@ Hardcoded to `/` path — no params, no deps.
 ```typescript
 // src/routes/index.tsx
 import { createFileRoute } from "@tanstack/react-router";
-import { cmsHomeRouteConfig } from "@decocms/start/routes";
+import { cmsHomeRouteConfig, loadDeferredSection } from "@decocms/start/routes";
 import { DecoPageRenderer } from "@decocms/start/hooks";
+import type { ResolvedSection, DeferredSection } from "@decocms/start/cms";
 
-const config = cmsHomeRouteConfig({
+const homeConfig = cmsHomeRouteConfig({
   defaultTitle: "My Store - Homepage",
 });
 
+type HomeData = {
+  resolvedSections: ResolvedSection[];
+  deferredSections: DeferredSection[];
+} | null;
+
 export const Route = createFileRoute("/")({
-  ...config,
+  ...homeConfig,
   component: HomePage,
 });
 
 function HomePage() {
-  const page = Route.useLoaderData();
-  if (!page) {
-    return <div>Loading...</div>;
-  }
-  return <DecoPageRenderer sections={page.resolvedSections} />;
+  const data = Route.useLoaderData() as HomeData;
+  if (!data) return null;
+
+  return (
+    <DecoPageRenderer
+      sections={data.resolvedSections ?? []}
+      deferredSections={data.deferredSections ?? []}
+      pagePath="/"
+      loadDeferredSectionFn={(d) => loadDeferredSection({ data: d }) as Promise<ResolvedSection | null>}
+    />
+  );
 }
 ```
 
+`cmsHomeRouteConfig` already includes `routeCacheDefaults("static")` and `cacheHeaders("static")`, giving the homepage a 5-min client staleTime and 24h edge TTL. Do NOT add additional cache config.
+
 ### `cmsHomeRouteConfig` Options
 
 ```typescript
@@ -308,15 +353,17 @@ The root route contains site-specific elements that should NOT be in the framewo
 
 ### Production
 
-Set by `routeCacheDefaults(profile)` based on page type:
+Set by `routeCacheDefaults(profile)` based on page type (from `cacheHeaders.ts`):
 
 | Profile | staleTime | gcTime |
 |---------|-----------|--------|
 | static | 5 min | 30 min |
-| product | 5 min | 30 min |
-| listing | 2 min | 10 min |
-| search | 60s | 5 min |
+| product | 1 min | 5 min |
+| listing | 1 min | 5 min |
+| search | 30s | 2 min |
+| cart | 0 | 0 |
 | private | 0 | 0 |
+| none | 0 | 0 |
 
 ### Development
 

package/.cursor/skills/deco-edge-caching/SKILL.md

@@ -181,6 +181,116 @@ const cachedPLP = createCachedLoader("vtex/plp", vtexPLP, {
 
 This is per-isolate in-memory cache (V8 Map). Resets on cold start. Includes request deduplication (single-flight) and LRU eviction at 500 entries.
 
+## Cache Versioning with BUILD_HASH
+
+Deploy-time cache busting uses a `BUILD_HASH` environment variable (typically the git short SHA) passed to `wrangler deploy`. The worker-entry appends this to cache keys so deploying a new version automatically serves fresh content.
+
+```yaml
+# .github/workflows/deploy.yml
+- name: Deploy to Cloudflare Workers
+  run: npx wrangler deploy
+  env:
+    BUILD_HASH: ${{ github.sha }}
+```
+
+The worker-entry reads `env.BUILD_HASH` and injects it into cache keys. On new deploys, old cache entries simply expire naturally — no purge needed.
+
+## Site-Level Cache Pattern Registration
+
+For sites with known institutional/static pages that would otherwise get the conservative 2-min "listing" TTL, register explicit patterns in `setup.ts`:
+
+```ts
+// setup.ts
+import { registerCachePattern } from "@decocms/start/sdk/cacheHeaders";
+
+// Institutional pages — content changes rarely, promote to 24h edge TTL
+registerCachePattern({
+  test: (p) =>
+    p.startsWith("/institucional") ||
+    p.startsWith("/central-de-atendimento") ||
+    p.startsWith("/politica-de-") ||
+    p.startsWith("/termos-") ||
+    p === "/fale-conosco" ||
+    p === "/trabalhe-conosco" ||
+    p === "/cadastro" ||
+    p === "/televendas",
+  profile: "static",
+});
+
+// Promotional/collection pages — already listing-like, but explicit is better
+registerCachePattern({
+  test: (p) =>
+    p.startsWith("/ofertas") ||
+    p.startsWith("/b/") ||
+    p.startsWith("/festival-"),
+  profile: "listing",
+});
+```
+
+Custom patterns are evaluated before built-in ones. This is the recommended way to tune caching per-site without modifying the framework.
+
+## Client-Side Route Caching (routeCacheDefaults)
+
+Without `routeCacheDefaults`, every SPA navigation triggers a fresh server request even if the data was just loaded. This is the most common cause of "slow navigation" reports.
+
+The catch-all route `$.tsx` MUST include `routeCacheDefaults`:
+
+```ts
+export const Route = createFileRoute("/$")({
+  ...routeCacheDefaults("listing"),   // <-- client-side cache: 1min stale, 5min gc
+  loaderDeps: routeConfig.loaderDeps,
+  loader: routeConfig.loader,
+  headers: ({ loaderData }) => {
+    return cacheHeaders(loaderData?.cacheProfile ?? "listing");
+  },
+  component: CmsPage,
+});
+```
+
+The homepage should use `cmsHomeRouteConfig` which already includes `routeCacheDefaults("static")`:
+
+```ts
+export const Route = createFileRoute("/")({
+  ...cmsHomeRouteConfig({ defaultTitle: "My Store" }),
+  component: HomePage,
+});
+```
+
+## Cache Analysis & Debugging with Stats Lake
+
+Deco sites emit CDN usage data to a ClickHouse stats-lake. This enables cache performance analysis:
+
+```sql
+-- Cache status breakdown for a site
+SELECT
+  JSONExtractString(extra, 'cacheStatus') AS cache_status,
+  count() AS requests,
+  round(count() * 100.0 / sum(count()) OVER (), 2) AS pct
+FROM fact_usage_daily
+WHERE site_id = <site_id>
+  AND date >= today() - 7
+GROUP BY cache_status
+ORDER BY requests DESC;
+```
+
+### Understanding "unknown" Cache Status
+
+When the Cloudflare Worker uses `caches.default.match()/put()` to serve cached responses internally, the outer CDN reports `cf-cache-status: DYNAMIC` because the Worker is the origin. The stats-lake logs this as "unknown" or empty.
+
+This means a high "unknown" percentage does NOT indicate a caching problem — it means the Worker's internal Cache API is handling the request before it reaches the origin CDN layer. This is expected and desirable behavior.
+
+To verify actual cache performance:
+1. Check `X-Cache: HIT|MISS` header (set by the worker-entry)
+2. Check `X-Cache-Profile` header (shows which profile was detected)
+3. Query stats-lake grouping by `cacheStatus` AND response status codes
+
+### Comparing Staging vs Production Cache
+
+When migrating to TanStack Workers, compare cache metrics:
+- Production (Deno/Fresh on Kubernetes) typically shows high HIT rates because traffic volume keeps caches warm
+- Staging Workers may show lower HIT rates due to lower traffic, plus "unknown" status from internal Cache API
+- The "unknown" requests on Workers are functionally equivalent to HITs — they're served from the Worker's Cache API without hitting the origin server function
+
 ## Key Constraints
 
 - **Cache API ignores `s-maxage`** — the factory uses `max-age` equal to `sMaxAge` when storing in Cache API
@@ -188,6 +298,8 @@ This is per-isolate in-memory cache (V8 Map). Resets on cold start. Includes req
 - **Device keys add a query param** — `__cf_device=mobile|desktop` is appended to cache keys, so purging must clear both
 - **Non-200 responses are never cached** — only 200 OK goes into Cache API
 - **`/_server` paths always bypass cache** — TanStack Start RPC requests are never edge-cached
+- **UTM parameters are stripped** — `utm_*`, `gclid`, `fbclid` are removed from cache keys to improve hit rates
+- **Segment hashing** — user segments (from matchers/flags) are hashed into the cache key so different audiences get different cached responses
 
 ## Package Exports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/start",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "description": "Deco framework for TanStack Start - CMS bridge, admin protocol, hooks, schema generation",
   "main": "./src/index.ts",

package/src/admin/cors.ts

@@ -1,4 +1,4 @@
-const ADMIN_ORIGINS = [
+const ADMIN_ORIGINS = new Set([
   "https://admin.deco.cx",
   "https://v0-admin.deco.cx",
   "https://play.deco.cx",
@@ -6,7 +6,24 @@ const ADMIN_ORIGINS = [
   "https://deco.chat",
   "https://admin.decocms.com",
   "https://decocms.com",
-];
+]);
+
+/**
+ * Register additional allowed admin origins.
+ * Useful for self-hosted admin UIs or custom dashboards.
+ */
+export function registerAdminOrigin(origin: string): void {
+  ADMIN_ORIGINS.add(origin);
+}
+
+/**
+ * Register multiple additional allowed admin origins.
+ */
+export function registerAdminOrigins(origins: string[]): void {
+  for (const origin of origins) {
+    ADMIN_ORIGINS.add(origin);
+  }
+}
 
 export function isAdminOrLocalhost(request: Request): boolean {
   const origin = request.headers.get("origin") || request.headers.get("referer") || "";
@@ -15,7 +32,10 @@ export function isAdminOrLocalhost(request: Request): boolean {
     return true;
   }
 
-  return ADMIN_ORIGINS.some((domain) => origin.startsWith(domain));
+  for (const domain of ADMIN_ORIGINS) {
+    if (origin.startsWith(domain)) return true;
+  }
+  return false;
 }
 
 export function corsHeaders(request: Request): Record<string, string> {

package/src/admin/index.ts

@@ -1,4 +1,4 @@
-export { corsHeaders, isAdminOrLocalhost } from "./cors";
+export { corsHeaders, isAdminOrLocalhost, registerAdminOrigin, registerAdminOrigins } from "./cors";
 export { handleDecofileRead, handleDecofileReload } from "./decofile";
 export {
   handleInvoke,

package/src/admin/meta.ts

@@ -1,3 +1,4 @@
+import { djb2Hex } from "../sdk/djb2";
 import { composeMeta, type MetaResponse } from "./schema";
 
 let metaData: MetaResponse | null = null;
@@ -26,18 +27,13 @@ export function setMetaData(data: MetaResponse) {
 
 /**
  * Content-based hash for ETag.
- * Uses a simple DJB2-style hash over the serialised JSON so any
- * definition change results in a different ETag, forcing admin to
- * re-fetch rather than use stale cached meta.
+ * Uses DJB2 over the serialised JSON so any definition change
+ * results in a different ETag, forcing admin to re-fetch.
  */
 function getEtag(): string {
   if (!cachedEtag) {
     const str = JSON.stringify(metaData || {});
-    let hash = 5381;
-    for (let i = 0; i < str.length; i++) {
-      hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0;
-    }
-    cachedEtag = `"meta-${hash.toString(36)}"`;
+    cachedEtag = `"meta-${djb2Hex(str)}"`;
   }
   return cachedEtag;
 }

package/src/admin/render.ts

@@ -1,35 +1,14 @@
 import { createElement } from "react";
 import { loadBlocks, withBlocksOverride } from "../cms/loader";
 import { getSection } from "../cms/registry";
-import { resolveValue } from "../cms/resolve";
+import { resolveValue, WELL_KNOWN_TYPES } from "../cms/resolve";
+import { buildHtmlShell } from "../sdk/htmlShell";
 import { LIVE_CONTROLS_SCRIPT } from "./liveControls";
-import { getRenderShellConfig } from "./setup";
 
 export { setRenderShell } from "./setup";
 
 function wrapInHtmlShell(sectionHtml: string): string {
-  const { cssHref, fontHrefs, themeName, bodyClass, htmlLang } = getRenderShellConfig();
-  const stylesheets = [
-    ...fontHrefs.map((href) => `<link rel="stylesheet" href="${href}" />`),
-    cssHref ? `<link rel="stylesheet" href="${cssHref}" />` : "",
-  ].join("\n    ");
-
-  const themeAttr = themeName ? ` data-theme="${themeName}"` : "";
-  const langAttr = htmlLang ? ` lang="${htmlLang}"` : "";
-  const bodyAttr = bodyClass ? ` class="${bodyClass}"` : "";
-
-  return `<!DOCTYPE html>
-<html${langAttr}${themeAttr}>
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    ${stylesheets}
-    <script>${LIVE_CONTROLS_SCRIPT}</script>
-</head>
-<body${bodyAttr}>
-${sectionHtml}
-</body>
-</html>`;
+  return buildHtmlShell({ body: sectionHtml, script: LIVE_CONTROLS_SCRIPT });
 }
 
 /**
@@ -139,7 +118,7 @@ export async function handleRender(request: Request): Promise<Response> {
     }
 
     // Page compositor: resolve + render all child sections
-    if (component === "website/pages/Page.tsx") {
+    if (component === WELL_KNOWN_TYPES.PAGE) {
       const rawSections = props.sections;
       const resolvedSections = await resolveValue(rawSections);
       const sectionsList = Array.isArray(resolvedSections)

package/src/admin/setup.ts

@@ -21,9 +21,9 @@ export {
 
 let cssHref: string | null = null;
 let fontHrefs: string[] = [];
-let themeName = "light";
-let bodyClass = "bg-base-100 text-base-content";
-let htmlLang = "pt-BR";
+let themeName = "";
+let bodyClass = "";
+let htmlLang = "en";
 
 export function setRenderShell(opts: {
   css?: string;

package/src/cms/index.ts

@@ -38,6 +38,7 @@ export {
   evaluateMatcher,
   getAsyncRenderingConfig,
   onBeforeResolve,
+  registerBotPattern,
   registerCommerceLoader,
   registerCommerceLoaders,
   registerMatcher,
@@ -47,6 +48,7 @@ export {
   setAsyncRenderingConfig,
   setDanglingReferenceHandler,
   setResolveErrorHandler,
+  WELL_KNOWN_TYPES,
 } from "./resolve";
 export type { SectionLoaderFn } from "./sectionLoaders";
 export {

package/src/cms/loader.ts

@@ -1,4 +1,5 @@
 import * as asyncHooks from "node:async_hooks";
+import { djb2Hex } from "../sdk/djb2";
 
 export type Resolvable = {
   __resolveType?: string;
@@ -54,12 +55,7 @@ export function onChange(listener: ChangeListener) {
 // ---------------------------------------------------------------------------
 
 function computeRevision(blocks: Record<string, unknown>): string {
-  const str = JSON.stringify(blocks);
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0;
-  }
-  return hash.toString(36);
+  return djb2Hex(JSON.stringify(blocks));
 }
 
 // ---------------------------------------------------------------------------

package/src/cms/registry.ts

@@ -83,7 +83,8 @@ export async function preloadSectionModule(
     if (mod.ErrorFallback) opts.errorFallback = mod.ErrorFallback;
     sectionOptions[resolveType] = opts;
     return opts;
-  } catch {
+  } catch (e) {
+    console.warn(`[Registry] Failed to preload section module "${resolveType}":`, e);
     return existing;
   }
 }
@@ -125,8 +126,8 @@ export async function preloadSectionComponents(keys: string[]): Promise<void> {
         if (mod.LoadingFallback) opts.loadingFallback = mod.LoadingFallback;
         if (mod.ErrorFallback) opts.errorFallback = mod.ErrorFallback;
         sectionOptions[key] = opts;
-      } catch {
-        /* ignore — will fall back to React.lazy */
+      } catch (e) {
+        console.warn(`[Registry] Failed to preload component "${key}":`, e);
       }
     }),
   );