@cimplify/cli 0.6.16 → 0.7.1

package/templates/storefront-fashion/app/products/[slug]/page.tsx

@@ -2,9 +2,8 @@ import type { Metadata } from "next";
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import { cacheTag, cacheLife } from "next/cache";
 import {
-  CACHE_LIFE_DEFAULT, getServerClient,
+  getServerClient,
   tags,
   type Product,
   type ProductWithDetails,
@@ -13,6 +12,21 @@ import { ProductDetail } from "./product-detail";
 import { brand } from "@/lib/brand";
 import { getSiteUrl } from "@/lib/site-url";
 
+// Pre-enumerate every product slug at build time so Next can emit cacheable
+// responses (s-maxage instead of no-store) for the route. Without this, every
+// PDP is treated as fully runtime-dynamic and CF edge skips it. Placeholder
+// fallback keeps the build alive if the catalogue API isn't reachable at
+// build time; the page handler already calls notFound() on unknown slugs.
+export async function generateStaticParams() {
+  const r = await getServerClient().catalogue.getProducts({ limit: 10_000 });
+  if (!r.ok || r.value.items.length === 0) {
+    return [{ slug: "__placeholder__" }];
+  }
+  return r.value.items.map((p) => ({ slug: p.slug ?? p.id }));
+}
+
+export const revalidate = 3600;
+
 function productLd(product: ProductWithDetails, SITE_URL: string) {
   const image = product.image_url ?? product.images?.[0];
   const inStock = product.inventory_status?.in_stock !== false;
@@ -41,34 +55,45 @@ interface ProductData {
   related: Product[];
 }
 
-async function getProduct(slug: string): Promise<ProductData | null> {
-  "use cache";
-  cacheLife(CACHE_LIFE_DEFAULT);
+type ProductResult =
+  | { ok: true; data: ProductData }
+  | { ok: false; code: string };
 
+async function getProduct(slug: string): Promise<ProductResult> {
   const client = getServerClient();
-  const r = await client.catalogue.getProductBySlug(slug);
-  if (!r.ok) {
-    cacheTag(tags.products());
-    return null;
-  }
+  const r = await client.catalogue.getProductBySlug(slug, {
+    cacheOptions: {
+      revalidate: 3600,
+      tags: [tags.product(slug), tags.products()],
+    },
+  });
+  if (!r.ok) return { ok: false, code: r.error.code };
+
+  const product = r.value;
   // Tag with the resolved ID — Cimplify dispatches tags.product(id), not slug.
   // See https://cimplify.dev/docs/sdk/revalidation#dynamic-routes--tag-by-id-never-by-slug
-  cacheTag(tags.product(r.value.id), tags.products());
-
-  const related = r.value.category_id
+  const related = product.category_id
     ? await client.catalogue
-        .getCategoryProducts(r.value.category_id)
+        .getCategoryProducts(product.category_id, undefined, {
+          cacheOptions: {
+            revalidate: 3600,
+            tags: [
+              tags.product(product.id),
+              tags.categoryProducts(product.category_id),
+            ],
+          },
+        })
         .then((res) =>
           res.ok
             ? (
                 ((res.value as { items?: Product[] }).items ??
                   (res.value as Product[])) as Product[]
-              ).filter((p) => p.id !== r.value.id).slice(0, 4)
+              ).filter((p) => p.id !== product.id).slice(0, 4)
             : [],
         )
     : [];
 
-  return { product: r.value, related };
+  return { ok: true, data: { product, related } };
 }
 
 export async function generateMetadata({
@@ -78,9 +103,9 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { slug } = await params;
   const siteUrl = await getSiteUrl();
-  const data = await getProduct(slug);
-  if (!data) return {};
-  const { product } = data;
+  const result = await getProduct(slug);
+  if (!result.ok) return {};
+  const { product } = result.data;
   const image = product.image_url ?? product.images?.[0];
   return {
     title: `${product.name} — ${brand.name}`,
@@ -113,8 +138,13 @@ async function ProductContent({
 }) {
   const { slug } = await params;
   const siteUrl = await getSiteUrl();
-  const data = await getProduct(slug);
-  if (!data) notFound();
+  const result = await getProduct(slug);
+  if (!result.ok) {
+    if (result.code === "NOT_FOUND") notFound();
+    // Transient SDK error — render the soft skeleton; ISR will retry on next request.
+    return <ProductSkeleton />;
+  }
+  const data = result.data;
 
   return (
     <>

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

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { cacheTag, cacheLife } from "next/cache";
-import { CACHE_LIFE_DEFAULT, getServerClient, tags } from "@cimplify/sdk/server";
+import { getServerClient, tags } from "@cimplify/sdk/server";
 import { ShopClient } from "./shop-client";
 import { brand } from "@/lib/brand";
 
@@ -10,15 +9,18 @@ export const metadata: Metadata = {
   description: brand.description,
 };
 
-async function getShopData() {
-  "use cache";
-  cacheTag(tags.products(), tags.categories());
-  cacheLife(CACHE_LIFE_DEFAULT);
+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-fashion/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.
  *
  * The page hero (in `app/shop/page.tsx`) already provides the title; we

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

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { cacheTag, cacheLife } from "next/cache";
-import { CACHE_LIFE_DEFAULT, getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
 import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
@@ -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(CACHE_LIFE_DEFAULT);
-
   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-fashion/bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "__STOREFRONT_NAME__",
       "dependencies": {
-        "@cimplify/sdk": "^0.49.2",
+        "@cimplify/sdk": "^0.54.0",
         "next": "^16.2.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -32,7 +32,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.2", "", { "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-W/PtzLztRYOPo4LCKmTvejfz56CQZUflXSdSshYl6ft1q17BIy8bnzfplbYnojiQb5OiCWr0FAzG68S2tvO93w=="],
+    "@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-fashion/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-16 border-t border-border bg-foreground text-background/80 text-sm">

package/templates/storefront-fashion/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-fashion/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-fashion/package.json

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

package/templates/storefront-grocery/.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-grocery/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-grocery/app/categories/[slug]/page.tsx

@@ -2,9 +2,8 @@ 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 {
-  CACHE_LIFE_DEFAULT, getServerClient,
+  getServerClient,
   tags,
   type Category,
   type Product,
@@ -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(CACHE_LIFE_DEFAULT);
+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="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">

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

@@ -2,9 +2,8 @@ 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 {
-  CACHE_LIFE_DEFAULT, getServerClient,
+  getServerClient,
   tags,
   type Collection,
   type Product,
@@ -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(CACHE_LIFE_DEFAULT);
+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="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <header className="mb-8 text-center">

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

@@ -1,18 +1,22 @@
-import { cacheTag, cacheLife } from "next/cache";
-import { CACHE_LIFE_DEFAULT, getServerClient, tags, type Product } from "@cimplify/sdk/server";
+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(CACHE_LIFE_DEFAULT);
+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 : [];