@cimplify/cli 0.6.15 → 0.7.1

package/templates/storefront-restaurant/app/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { Hero } from "@/components/hero";
 import { CollectionStrip } from "@/components/collection-strip";
@@ -12,22 +11,33 @@ export const metadata: Metadata = {
   description: brand.description,
 };
 
-async function getHomeData() {
-  "use cache";
-  cacheTag(tags.collections(), tags.categories(), tags.products());
-  cacheLife("hours");
+export const revalidate = 3600;
 
+async function getHomeData() {
   const client = getServerClient();
   const [colRes, catRes] = await Promise.all([
-    client.catalogue.getCollections(),
-    client.catalogue.getCategories(),
+    client.catalogue.getCollections({
+      cacheOptions: { revalidate: 3600, tags: [tags.collections()] },
+    }),
+    client.catalogue.getCategories({
+      cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+    }),
   ]);
   const collections = colRes.ok ? colRes.value : [];
   const categories = catRes.ok ? catRes.value : [];
 
   const collectionsWithProducts = await Promise.all(
     collections.map(async (col) => {
-      const r = await client.catalogue.getCollectionProducts(col.id);
+      const r = await client.catalogue.getCollectionProducts(
+        col.id,
+        undefined,
+        {
+          cacheOptions: {
+            revalidate: 3600,
+            tags: [tags.collectionProducts(col.id)],
+          },
+        },
+      );
       const items = r.ok
         ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
         : [];

package/templates/storefront-restaurant/app/reservations/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { ReservationsClient } from "./reservations-client";
 import { brand } from "@/lib/brand";
@@ -10,13 +9,14 @@ export const metadata: Metadata = {
   description: "Pick a date, time, and party size. We'll hold your table.",
 };
 
-async function getSeatingOptions(): Promise<Product[]> {
-  "use cache";
-  cacheTag(tags.products());
-  cacheLife("hours");
+export const revalidate = 3600;
 
+async function getSeatingOptions(): Promise<Product[]> {
   const client = getServerClient();
-  const r = await client.catalogue.getProducts({ limit: 50 });
+  const r = await client.catalogue.getProducts(
+    { limit: 50 },
+    { cacheOptions: { revalidate: 3600, tags: [tags.products()] } },
+  );
   if (!r.ok) return [];
   // Reservation options live as service products in the catalogue (e.g.
   // "Two-top", "Four-top", "Long table"). Filter to type=service.

package/templates/storefront-restaurant/app/shop/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags } from "@cimplify/sdk/server";
 import { ShopClient } from "./shop-client";
 import { brand } from "@/lib/brand";
@@ -9,15 +8,18 @@ export const metadata: Metadata = {
   description: brand.description,
 };
 
-async function getShopData() {
-  "use cache";
-  cacheTag(tags.products(), tags.categories());
-  cacheLife("hours");
+export const revalidate = 3600;
 
+async function getShopData() {
   const client = getServerClient();
   const [p, c] = await Promise.all([
-    client.catalogue.getProducts({ limit: 50 }),
-    client.catalogue.getCategories(),
+    client.catalogue.getProducts(
+      { limit: 50 },
+      { cacheOptions: { revalidate: 3600, tags: [tags.products()] } },
+    ),
+    client.catalogue.getCategories({
+      cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+    }),
   ]);
   return {
     products: p.ok ? p.value.items : [],

package/templates/storefront-restaurant/app/shop/shop-client.tsx

@@ -6,7 +6,7 @@ import { StoreProductCard } from "@/components/store-product-card";
 
 /**
  * Client island for the shop page. Server-side fetches all products and
- * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
+ * categories (ISR-cached in `app/shop/page.tsx`), then hands
  * them to `<CataloguePage>` which owns the interactive filter / sort state.
  */
 export function ShopClient({

package/templates/storefront-restaurant/app/sitemap-page/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { brand } from "@/lib/brand";
 
@@ -9,6 +8,8 @@ export const metadata: Metadata = {
   description: "A human-readable index of every page on this site.",
 };
 
+export const revalidate = 3600;
+
 interface SitemapData {
   products: { slug: string; name: string }[];
   categories: { slug: string; name: string }[];
@@ -16,15 +17,18 @@ interface SitemapData {
 }
 
 async function getSitemap(): Promise<SitemapData> {
-  "use cache";
-  cacheTag(tags.products(), tags.categories(), tags.collections());
-  cacheLife("hours");
-
   const client = getServerClient();
   const [pRes, cRes, colRes] = await Promise.all([
-    client.catalogue.getProducts({ limit: 500 }),
-    client.catalogue.getCategories(),
-    client.catalogue.getCollections(),
+    client.catalogue.getProducts(
+      { limit: 500 },
+      { cacheOptions: { revalidate: 3600, tags: [tags.products()] } },
+    ),
+    client.catalogue.getCategories({
+      cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+    }),
+    client.catalogue.getCollections({
+      cacheOptions: { revalidate: 3600, tags: [tags.collections()] },
+    }),
   ]);
   return {
     products: (pRes.ok ? pRes.value.items : []).map((p: Product) => ({

package/templates/storefront-restaurant/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "__STOREFRONT_NAME__",
       "dependencies": {
-        "@cimplify/sdk": "^0.49.1",
+        "@cimplify/sdk": "^0.54.0",
         "next": "^16.2.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -31,7 +31,7 @@
 
     "@base-ui/utils": ["@base-ui/utils@0.2.9", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw=="],
 
-    "@cimplify/sdk": ["@cimplify/sdk@0.49.1", "", { "dependencies": { "@base-ui/react": "^1.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "libphonenumber-js": "1.12.41", "react-day-picker": "^9.14.0", "tailwind-merge": "^3.5.0", "zod": "^4.4.3" }, "peerDependencies": { "@paystack/inline-js": "^2.22.8", "msw": ">=2.0.0", "react": ">=17.0.0", "vitest": ">=2.0.0" }, "optionalPeers": ["@paystack/inline-js", "msw", "react", "vitest"], "bin": { "cimplify-mock": "dist/mock/cli.mjs" } }, "sha512-f105Jd129KQSK747SjiJAxiwKhY7S82D9v9giJTg4ckhdQakc48V+B/TseP2LwtXZDJ71iRH5W+nod0/BHW42A=="],
+    "@cimplify/sdk": ["@cimplify/sdk@0.54.0", "", { "dependencies": { "@base-ui/react": "^1.4.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "libphonenumber-js": "1.12.41", "react-day-picker": "^9.14.0", "tailwind-merge": "^3.5.0", "zod": "^4.4.3" }, "peerDependencies": { "@paystack/inline-js": "^2.22.8", "msw": ">=2.0.0", "react": ">=17.0.0", "vitest": ">=2.0.0" }, "optionalPeers": ["@paystack/inline-js", "msw", "react", "vitest"], "bin": { "cimplify-mock": "dist/mock/cli.mjs" } }, "sha512-YUN/lOqViHci1v9USWWwAWty29pEXBdLTuKarSl8EpafWh5jkdGZ1Q+Ne9/bfgTZmR8iTUltA8U7glV2FoRSgg=="],
 
     "@date-fns/tz": ["@date-fns/tz@1.4.1", "", {}, "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="],
 

package/templates/storefront-restaurant/components/footer.tsx

@@ -48,7 +48,6 @@ const FALLBACK_ICON = (
 );
 
 export async function Footer() {
-  "use cache";
   const year = new Date().getFullYear();
   return (
     <footer className="mt-12 px-6 sm:px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">

package/templates/storefront-restaurant/lib/site.config.ts

@@ -2,6 +2,6 @@
  * Canonical absolute URL. The platform overwrites this at build time with the
  * storefront's primary domain; the default only applies to local builds. It's
  * per-deploy config, not per-request, so it stays a static constant — keeping
- * the root layout prerenderable under `cacheComponents`.
+ * the root layout prerenderable.
  */
 export const SITE_URL = "https://example.com";

package/templates/storefront-restaurant/next.config.ts

@@ -19,13 +19,14 @@ if (STOREFRONT_URL === "http://127.0.0.1:8787") {
   );
 }
 
+// Cache Components ('use cache' + cacheTag/cacheLife) require Node-specific
+// setTimeout atomicity and serialize a postponed state that routinely exceeds
+// CF Workers' 128MB zlib limit. We're on Cloudflare Workers via opennext, so
+// we stay on Next 16's "Previous Model" — `fetch.next.{revalidate,tags}` via
+// the SDK's `cacheOptions`, plus `export const revalidate` per page. See
+// https://nextjs.org/docs/app/guides/caching-without-cache-components.
 const nextConfig: NextConfig = {
-  // Enable Next 16's `cacheComponents` mode so we can use `'use cache'` +
-  // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
-  // dynamic Suspense boundaries fill in when ready.
-  cacheComponents: true,
   async redirects() {
-    // Config-level so cacheComponents needn't prerender a redirect()-only page.
     return [
       { source: "/login", destination: "/account", permanent: false },
       { source: "/signup", destination: "/account", permanent: false },

package/templates/storefront-restaurant/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.49.1",
+    "@cimplify/sdk": "^0.54.0",
     "next": "^16.2.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/templates/storefront-retail/.claude/skills/cimplify-storefront/SKILL.md

@@ -1,19 +1,19 @@
 ---
 name: cimplify-storefront
-description: Build, customize, rebrand, or deploy a Cimplify-scaffolded storefront. Triggers when the user asks to create a storefront, rebrand a Cimplify template, change the palette, add a page, deploy to Cimplify, or works in a project containing `lib/brand.ts` and `next.config.ts` with `cacheComponents`.
+description: Build, customize, rebrand, or deploy a Cimplify-scaffolded storefront. Triggers when the user asks to create a storefront, rebrand a Cimplify template, change the palette, add a page, deploy to Cimplify, or works in a project containing `lib/brand.ts` and `next.config.ts`.
 ---
 
 # Cimplify Storefront skill
 
-You're working on a project scaffolded from `cimplify init`. The architecture is opinionated and the rebrand surface is intentionally small. Read `AGENTS.md` at the project root for the file ↔ brand-field map for *this template's* industry; this skill gives you the playbook that's the same across all six.
+You're working on a project scaffolded from `cimplify init`. The architecture is opinionated and the rebrand surface is intentionally small. Read `AGENTS.md` at the project root for the file ↔ brand-field map for *this template's* industry; this skill gives you the playbook that's the same across all eight.
 
 ## The contract — never break
 
 1. **`lib/brand.ts` is the only place for content edits.** Every visible string reads from this file. If a string isn't in `brand`, *add a field* to the `Brand` interface — don't hardcode it in a page or component.
 2. **`app/globals.css` `@theme { … }`** holds palette + radius + font references. To re-skin the entire site, edit only this block.
-3. **Server Components are cached** via `'use cache'` + `cacheTag(tags.X())` + `cacheLife("hours")`. Don't downgrade them to `"use client"` to avoid an issue — fix the issue.
-4. **Client islands** (anything reading `useSearchParams`, `usePathname`, `useRouter`, `useState`) live behind `<Suspense>`.
-5. **`cacheComponents: true`** in `next.config.ts` is non-negotiable. Don't turn it off.
+3. **Pages use ISR**, not Cache Components. Each page sets `export const revalidate = <seconds>` and reads from the SDK with `cacheOptions: { revalidate, tags }`. Don't add `'use cache'` / `cacheTag` / `cacheLife` — they require Node-specific runtime guarantees Cloudflare Workers doesn't provide, and their postponed state blows past CF's 128MB zlib limit.
+4. **`cacheComponents` stays OFF** in `next.config.ts`. The deploy target is Cloudflare Workers via opennext.
+5. **Client islands** (anything reading `useSearchParams`, `usePathname`, `useRouter`, `useState`) live behind `<Suspense>`.
 6. **`bun run test:run` (vitest)** is the canonical test runner. `bun test` will show false failures because Bun's `vi` shim is incomplete.
 7. **Cart, checkout, orders stay client.** They're session-bound. Don't try to SSR them.
 
@@ -57,7 +57,7 @@ Don't touch any other file. If the rebrand needs content not in the schema, add
 
 1. Build it as a Server Component in `components/` (or a client island in `*-client.tsx` if interactive).
 2. Read merchant copy from `brand`. Add new fields to the `Brand` interface if needed.
-3. Wrap interactive bits in `<Suspense fallback={…}>` so the cached chrome streams.
+3. Wrap interactive bits in `<Suspense fallback={…}>` so static chrome streams first.
 4. Compose into the page.
 
 ### Wire a Server Action that mutates data
@@ -72,24 +72,39 @@ export async function createProduct(input: ProductInput) {
 }
 ```
 
-After every mutation, call the matching `revalidate*` helper from `@cimplify/sdk/server`: `revalidateProducts`, `revalidateProduct(id)`, `revalidateCategories`, `revalidateCategory(id)`, `revalidateCollections`, `revalidateCollection(id)`, `revalidateBusiness`.
+After every mutation, call the matching `revalidate*` helper from `@cimplify/sdk/server`: `revalidateProducts`, `revalidateProduct(id)`, `revalidateCategories`, `revalidateCategory(id)`, `revalidateCollections`, `revalidateCollection(id)`, `revalidateBusiness`. These fire eviction events the central tag-cache worker picks up — it drops R2 entries and purges Cloudflare's edge.
 
-### Add a Server Component data fetch
+### Add a Server Component data fetch (ISR)
 
 ```ts
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags } from "@cimplify/sdk/server";
 
-async function getX() {
-  "use cache";
-  cacheTag(tags.products());
-  cacheLife("hours");
-  const r = await getServerClient().catalogue.getProducts({ limit: 24 });
-  if (!r.ok) throw new Error(r.error.message);
+export const revalidate = 3600; // page-level baseline
+
+async function getProducts() {
+  const r = await getServerClient().catalogue.getProducts({
+    limit: 24,
+    cacheOptions: { revalidate: 3600, tags: [tags.products()] },
+  });
+  if (!r.ok) {
+    // Soft-render on transient errors so the page degrades gracefully
+    // instead of hard-failing with React #419. Only call notFound() on
+    // genuine 404 from origin.
+    if (r.error.code === "NOT_FOUND") notFound();
+    return [];
+  }
   return r.value.items;
 }
 ```
 
+For `[slug]` routes, add `generateStaticParams` with a placeholder fallback so the page is statically prerenderable even with no upstream data yet:
+
+```ts
+export async function generateStaticParams() {
+  return [{ slug: "__placeholder__" }];
+}
+```
+
 ### Eject an SDK component for deeper customization
 
 Try `classNames`, `renderImage`, `renderLink`, slot props first. If those run out:
@@ -116,10 +131,11 @@ cimplify domains add my-store.com
 ## Pitfalls — explicit ❌ list
 
 - ❌ Hardcoding any visible string in a page or component. Always `brand.X`.
-- ❌ Disabling `cacheComponents: true` to silence a warning. Fix the warning by wrapping the dynamic call in `<Suspense>`.
-- ❌ Using `unstable_cache` — Next 16's canonical primitive is `'use cache'` + `cacheTag` + `cacheLife`.
+- ❌ Adding `'use cache'`, `cacheTag`, `cacheLife`, or enabling `cacheComponents: true`. We deploy to Cloudflare Workers; postponed state exceeds the 128MB zlib limit. Use `cacheOptions` on SDK reads + `export const revalidate` per page.
+- ❌ Using `unstable_cache` — removed in Next 16. Use SDK `cacheOptions` instead.
 - ❌ Bypassing `getServerClient()` and calling `createCimplifyClient` directly in a Server Component — loses per-request memoization.
 - ❌ Mutating data without calling the matching `revalidate*` helper.
+- ❌ Calling `notFound()` on transient SDK errors — causes React #419 mid-stream. Check the `Result.error.code === "NOT_FOUND"` first; otherwise soft-render a skeleton.
 - ❌ Adding an `app/error.tsx` handler that calls `reset()` without logging — silently swallowed errors hide bugs.
 - ❌ Running `bun test` and reporting failures. Use `bun run test:run` (vitest).
 - ❌ Editing the per-template `AGENTS.md` to remove notes about TODOs (contact form, newsletter fake submits) — they're real.
@@ -132,7 +148,7 @@ cimplify domains add my-store.com
 | Architectural rules | `AGENTS.md` at project root + this skill |
 | Running locally | `bun dev` (boots mock + Next together) |
 | Switching mock seed | edit `dev:mock` in `package.json` |
-| Full SDK reference | `docs/sdk/storefronts.md` in the Cimplify repo |
+| Full SDK reference | `cimplify.dev/sdk/optimization`, `cimplify.dev/sdk/server` |
 
 ## What to do when the user asks something out-of-scope
 

package/templates/storefront-retail/CLAUDE.md

@@ -17,6 +17,7 @@ That covers ~95% of what merchants ask for. For anything else, follow the `cimpl
 ## Don't do
 
 - Hardcode strings in pages or components.
-- Disable `cacheComponents: true` in `next.config.ts`.
-- Use `unstable_cache` — Next 16's canonical primitive is `'use cache'`.
+- Enable `cacheComponents: true` in `next.config.ts` — we're on Cloudflare Workers, where `'use cache'` postponed state blows past CF's 128MB zlib limit. This template stays on Next 16's "Previous Model" (ISR): `export const revalidate` per page + `cacheOptions: { revalidate, tags }` on SDK reads.
+- Add `'use cache'`, `cacheTag`, or `cacheLife` anywhere. Use the SDK's `cacheOptions` instead.
+- Use `unstable_cache` — it's gone in Next 16. Use SDK `cacheOptions` or `fetch.next.{revalidate,tags}`.
 - Run `bun test` (Bun's `vi` shim is incomplete) — use `bun run test:run`.

package/templates/storefront-retail/app/categories/[slug]/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Suspense } from "react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { cacheTag, cacheLife } from "next/cache";
 import {
   getServerClient,
   tags,
@@ -12,26 +11,46 @@ import {
 import { ListingClient } from "./listing-client";
 import { brand } from "@/lib/brand";
 
+// See app/products/[slug]/page.tsx for the rationale on generateStaticParams.
+export async function generateStaticParams() {
+  const r = await getServerClient().catalogue.getCategories();
+  if (!r.ok || r.value.length === 0) {
+    return [{ slug: "__placeholder__" }];
+  }
+  return r.value.map((c) => ({ slug: c.slug ?? c.id }));
+}
+
+export const revalidate = 3600;
+
 interface CategoryData {
   category: Category;
   products: Product[];
 }
 
-async function getCategory(slug: string): Promise<CategoryData | null> {
-  "use cache";
-  cacheTag(tags.categories());
-  cacheLife("hours");
+type CategoryResult =
+  | { ok: true; data: CategoryData }
+  | { ok: false; code: string };
 
+async function getCategory(slug: string): Promise<CategoryResult> {
   const client = getServerClient();
-  const catRes = await client.catalogue.getCategoryBySlug(slug);
-  if (!catRes.ok) return null;
+  const catRes = await client.catalogue.getCategoryBySlug(slug, {
+    cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+  });
+  if (!catRes.ok) return { ok: false, code: catRes.error.code };
 
-  cacheTag(tags.category(catRes.value.id), tags.categoryProducts(catRes.value.id));
-  const r = await client.catalogue.getCategoryProducts(catRes.value.id);
+  const r = await client.catalogue.getCategoryProducts(catRes.value.id, undefined, {
+    cacheOptions: {
+      revalidate: 3600,
+      tags: [
+        tags.category(catRes.value.id),
+        tags.categoryProducts(catRes.value.id),
+      ],
+    },
+  });
   const products = r.ok
     ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
     : [];
-  return { category: catRes.value, products };
+  return { ok: true, data: { category: catRes.value, products } };
 }
 
 export async function generateMetadata({
@@ -40,8 +59,9 @@ export async function generateMetadata({
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
   const { slug } = await params;
-  const data = await getCategory(slug);
-  if (!data) return {};
+  const result = await getCategory(slug);
+  if (!result.ok) return {};
+  const data = result.data;
   return {
     title: `${data.category.name} — ${brand.name}`,
     description: data.category.description ?? undefined,
@@ -66,10 +86,12 @@ async function CategoryContent({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
-  const data = await getCategory(slug);
-  if (!data) notFound();
-
-  const { category, products } = data;
+  const result = await getCategory(slug);
+  if (!result.ok) {
+    if (result.code === "NOT_FOUND") notFound();
+    return <CategorySkeleton />;
+  }
+  const { category, products } = result.data;
   return (
     <>
       <section className="bg-foreground text-background relative overflow-hidden">

package/templates/storefront-retail/app/collections/[slug]/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Suspense } from "react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { cacheTag, cacheLife } from "next/cache";
 import {
   getServerClient,
   tags,
@@ -12,26 +11,46 @@ import {
 import { ListingClient } from "./listing-client";
 import { brand } from "@/lib/brand";
 
+// See app/products/[slug]/page.tsx for the rationale on generateStaticParams.
+export async function generateStaticParams() {
+  const r = await getServerClient().catalogue.getCollections();
+  if (!r.ok || r.value.length === 0) {
+    return [{ slug: "__placeholder__" }];
+  }
+  return r.value.map((c) => ({ slug: c.slug ?? c.id }));
+}
+
+export const revalidate = 3600;
+
 interface CollectionData {
   collection: Collection;
   products: Product[];
 }
 
-async function getCollection(slug: string): Promise<CollectionData | null> {
-  "use cache";
-  cacheTag(tags.collections());
-  cacheLife("hours");
+type CollectionResult =
+  | { ok: true; data: CollectionData }
+  | { ok: false; code: string };
 
+async function getCollection(slug: string): Promise<CollectionResult> {
   const client = getServerClient();
-  const colRes = await client.catalogue.getCollectionBySlug(slug);
-  if (!colRes.ok) return null;
+  const colRes = await client.catalogue.getCollectionBySlug(slug, {
+    cacheOptions: { revalidate: 3600, tags: [tags.collections()] },
+  });
+  if (!colRes.ok) return { ok: false, code: colRes.error.code };
 
-  cacheTag(tags.collection(colRes.value.id), tags.collectionProducts(colRes.value.id));
-  const r = await client.catalogue.getCollectionProducts(colRes.value.id);
+  const r = await client.catalogue.getCollectionProducts(colRes.value.id, undefined, {
+    cacheOptions: {
+      revalidate: 3600,
+      tags: [
+        tags.collection(colRes.value.id),
+        tags.collectionProducts(colRes.value.id),
+      ],
+    },
+  });
   const products = r.ok
     ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
     : [];
-  return { collection: colRes.value, products };
+  return { ok: true, data: { collection: colRes.value, products } };
 }
 
 export async function generateMetadata({
@@ -40,8 +59,9 @@ export async function generateMetadata({
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
   const { slug } = await params;
-  const data = await getCollection(slug);
-  if (!data) return {};
+  const result = await getCollection(slug);
+  if (!result.ok) return {};
+  const data = result.data;
   return {
     title: `${data.collection.name} — ${brand.name}`,
     description: data.collection.description ?? undefined,
@@ -66,10 +86,12 @@ async function CollectionContent({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
-  const data = await getCollection(slug);
-  if (!data) notFound();
-
-  const { collection, products } = data;
+  const result = await getCollection(slug);
+  if (!result.ok) {
+    if (result.code === "NOT_FOUND") notFound();
+    return <CollectionSkeleton />;
+  }
+  const { collection, products } = result.data;
   return (
     <>
       <section className="bg-foreground text-background relative overflow-hidden">

package/templates/storefront-retail/app/llms.txt/route.ts

@@ -1,18 +1,22 @@
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { brand } from "@/lib/brand";
 import { getSiteUrl } from "@/lib/site-url";
 
-async function buildLlmsTxt(SITE_URL: string): Promise<string> {
-  "use cache";
-  cacheTag(tags.products(), tags.categories(), tags.collections());
-  cacheLife("hours");
+export const revalidate = 3600;
 
+async function buildLlmsTxt(SITE_URL: string): Promise<string> {
   const client = getServerClient();
   const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
-    client.catalogue.getProducts({ limit: 500 }),
-    client.catalogue.getCategories(),
-    client.catalogue.getCollections(),
+    client.catalogue.getProducts(
+      { limit: 500 },
+      { cacheOptions: { revalidate: 3600, tags: [tags.products()] } },
+    ),
+    client.catalogue.getCategories({
+      cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+    }),
+    client.catalogue.getCollections({
+      cacheOptions: { revalidate: 3600, tags: [tags.collections()] },
+    }),
   ]);
 
   const products: Product[] = productsRes.ok ? productsRes.value.items : [];

package/templates/storefront-retail/app/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags, type Collection, type Product } from "@cimplify/sdk/server";
 import { FeatureHero } from "@/components/feature-hero";
 import { CategoryTiles } from "@/components/category-tiles";
@@ -19,21 +18,26 @@ export const metadata: Metadata = {
   description: brand.description,
 };
 
+export const revalidate = 3600;
+
 interface CollectionWithProducts {
   collection: Collection;
   products: Product[];
 }
 
 async function getHomeData() {
-  "use cache";
-  cacheTag(tags.collections(), tags.categories(), tags.products());
-  cacheLife("hours");
-
   const client = getServerClient();
   const [colRes, catRes, productsRes] = await Promise.all([
-    client.catalogue.getCollections(),
-    client.catalogue.getCategories(),
-    client.catalogue.getProducts({ limit: 12 }),
+    client.catalogue.getCollections({
+      cacheOptions: { revalidate: 3600, tags: [tags.collections()] },
+    }),
+    client.catalogue.getCategories({
+      cacheOptions: { revalidate: 3600, tags: [tags.categories()] },
+    }),
+    client.catalogue.getProducts(
+      { limit: 12 },
+      { cacheOptions: { revalidate: 3600, tags: [tags.products()] } },
+    ),
   ]);
   const collections = colRes.ok ? colRes.value : [];
   const categories = catRes.ok ? catRes.value : [];
@@ -41,7 +45,16 @@ async function getHomeData() {
 
   const collectionsWithProducts: CollectionWithProducts[] = await Promise.all(
     collections.map(async (col) => {
-      const r = await client.catalogue.getCollectionProducts(col.id);
+      const r = await client.catalogue.getCollectionProducts(
+        col.id,
+        undefined,
+        {
+          cacheOptions: {
+            revalidate: 3600,
+            tags: [tags.collectionProducts(col.id)],
+          },
+        },
+      );
       const items = r.ok
         ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
         : [];