@rangojs/router 0.0.0-experimental.2 → 0.0.0-experimental.204030a9

package/skills/caching/SKILL.md

@@ -1,319 +1,369 @@
 ---
 name: caching
-description: Configure segment caching with memory or Cloudflare KV stores in rsc-router
+description: Configure segment caching with memory or Cloudflare KV stores in @rangojs/router
 argument-hint: [setup]
 ---
 
 # Caching
 
-rsc-router supports segment-level caching with stale-while-revalidate (SWR) for optimal performance.
+@rangojs/router supports segment-level caching with stale-while-revalidate (SWR) for optimal performance.
 
-## Router Cache Configuration
+> SWR support is store-specific. `CFCacheStore` revalidates segment, response,
+> and `"use cache"` entries in the background. `MemorySegmentCacheStore`
+> supports SWR for response and `"use cache"` item entries, but its
+> route-segment entries expire at TTL with no background revalidation — use
+> `CFCacheStore` for real segment SWR. See `/cache-guide`.
 
-Configure caching in `createRSCRouter`:
+## cache() is Partial Prerendering (PPR)
 
-```typescript
-import { createRSCRouter } from "rsc-router/server";
-import { MemorySegmentCacheStore } from "rsc-router/cache";
+`cache()` caches **everything except loaders**. On a cache hit, the cached
+segments (layouts, route components, parallels — including any resolved
+Suspense) are served from the store, and **loaders re-run fresh on every
+request**, streaming their results into the same response. Loaders are the
+dynamic "holes" of an otherwise-cached tree.
 
-const store = new MemorySegmentCacheStore({
-  defaults: { ttl: 60, swr: 300 }
-});
+This means a `cache()` boundary at the document root **is** whole-document
+Partial Prerendering: the static shell is cached and served instantly while
+per-request/per-user data stays live — in one streamed response, no extra round
+trip. The browser cannot tell the shell came from cache.
 
-const router = createRSCRouter<AppEnv>({
-  document: Document,
-  cache: {
-    store,
-    enabled: true,
-  },
-});
+```typescript
+cache({ ttl: 60, swr: 300 }, () => [
+  layout(<RootLayout />), // cached shell
+  path("/dashboard", Dashboard, { name: "dashboard" }, () => [
+    loader(StatsLoader), // DYNAMIC HOLE — re-runs every request
+  ]),
+]);
 ```
 
-### Dynamic Cache Configuration
+The consumer rule: **want it cached? render it inline. want it dynamic? put it
+in a loader and read it with `useLoader()` in a client component.** Anything
+read with `cookies()`, `headers()`, or a non-cacheable variable belongs in a
+loader (loaders always run fresh). Reading it directly in a cached handler
+throws; awaiting it with `ctx.use()` and rendering the result in a cached
+handler silently bakes per-request data into the shared shell (see "Cache purity
+& tainted objects" below).
 
-Use a factory function for environment-based config:
+Pre-rendering (`/prerender`) is the build-time twin: it caches the same shell at
+build time instead of on first request. Both feed the segment system
+identically, and loaders always run fresh at request time.
 
-```typescript
-const router = createRSCRouter<AppEnv>({
-  document: Document,
-  cache: (env) => ({
-    store: new CFCacheStore({
-      baseUrl: env.Bindings.CACHE_URL,
-      waitUntil: (fn) => env.ctx.waitUntil(fn),
-    }),
-    enabled: env.Bindings.CACHE_ENABLED === "true",
-  }),
-});
-```
-
-## Cache Stores
+## Route-Level Caching with cache()
 
-### Memory Store (Development)
+Use the `cache()` DSL function to cache routes:
 
 ```typescript
-import { MemorySegmentCacheStore } from "rsc-router/cache";
+import { urls } from "@rangojs/router";
 
-const store = new MemorySegmentCacheStore({
-  defaults: { ttl: 60, swr: 300 }
-});
+export const urlpatterns = urls(({ path, cache }) => [
+  // Cache these routes for 60 seconds, SWR for 5 minutes
+  cache({ ttl: 60, swr: 300 }, () => [
+    path("/blog", BlogIndex, { name: "blog" }),
+    path("/blog/:slug", BlogPost, { name: "blogPost" }),
+  ]),
 
-// Debug cache stats
-console.log(store.getStats());
+  // Uncached routes
+  path("/account", AccountPage, { name: "account" }),
+]);
 ```
 
-Features:
-- Survives HMR in development
-- No true SWR (entries expire at TTL)
-- Good for development and single-instance deployments
-
-### Cloudflare Cache Store (Production)
+## Cache Options
 
 ```typescript
-import { CFCacheStore } from "rsc-router/cache/cf";
-
-const store = new CFCacheStore({
-  namespace: "rsc-cache",              // Optional, uses caches.default
-  baseUrl: "https://cache.example.com/",
-  defaults: { ttl: 3600, swr: 7200 },
-  waitUntil: (fn) => ctx.waitUntil(fn),
-  version: "1.0.0",                    // For cache invalidation on deploy
-});
+cache(
+  {
+    ttl: 60, // Time-to-live in seconds (default: 60)
+    swr: 300, // Stale-while-revalidate window (default: 300)
+  },
+  () => [
+    // Cached routes
+  ],
+);
 ```
 
-Features:
-- Cloudflare Cache API integration
-- True SWR with atomic revalidation (prevents thundering herd)
-- Non-blocking writes via `waitUntil`
-- Version-based cache invalidation
+## Named Profile Shorthand
 
-## Cache Options
+Use a named cache profile string instead of an options object. The profile must be
+defined in `createRouter({ cacheProfiles })`. Unknown names throw at boot time.
 
 ```typescript
-interface CacheOptions {
-  // Time-to-live in seconds
-  ttl: number;
-
-  // Stale-while-revalidate window (seconds after TTL)
-  swr?: number;
-
-  // Override cache store for this boundary
-  store?: SegmentCacheStore;
-
-  // Conditional caching
-  condition?: (ctx) => boolean;
+// Define profiles in router
+createRouter({
+  cacheProfiles: {
+    default: { ttl: 900, swr: 1800 },
+    short: { ttl: 60, swr: 120 },
+    long: { ttl: 3600, swr: 7200 },
+  },
+});
 
-  // Custom cache key
-  key?: (ctx) => string | Promise<string>;
+// Use by name in urls
+export const urlpatterns = urls(({ path, cache }) => [
+  cache("long", () => [path("/blog", BlogIndex, { name: "blog" })]),
 
-  // Tags for invalidation
-  tags?: string[] | ((ctx) => string[]);
-}
+  // Also works without children (orphan cache boundary)
+  cache("short"),
+  path("/feed", FeedPage, { name: "feed" }),
+]);
 ```
 
-## Route-Level Caching
+These profile names are shared with the `"use cache: <name>"` directive. See
+`/use-cache` for function-level caching.
 
-Use `cache()` in handlers to set cache boundaries:
+## Loader-Level Caching
 
-```typescript
-import { map } from "rsc-router/server";
-
-export default map<typeof routes>(({ route, layout, cache }) => [
-  // Cache entire layout and children
-  cache({ ttl: 3600, swr: 7200 }, () => [
-    layout(<StaticLayout />, () => [
-      route("about", AboutPage),
-      route("contact", ContactPage),
-    ]),
-  ]),
+Cache individual loaders:
 
-  // Different cache settings per route
-  cache({ ttl: 60 }, () => [
-    route("dashboard", DashboardPage),
-  ]),
+```typescript
+path("/product/:slug", ProductPage, { name: "product" }, () => [
+  // Cache this loader's results
+  loader(ProductLoader, () => [cache({ ttl: 300 })]),
 
-  // No caching (default)
-  route("checkout", CheckoutPage),
+  // This loader is not cached
+  loader(CartLoader),
 ]);
 ```
 
-## Conditional Caching
+## Global Cache Configuration
 
-Skip cache based on request context:
+Configure a cache store in the router:
 
 ```typescript
-cache({
-  ttl: 3600,
-  condition: (ctx) => {
-    // Don't cache for authenticated users
-    const hasAuth = ctx.request.headers.has("Authorization");
-    return !hasAuth;
+import { createRouter } from "@rangojs/router";
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
+
+const store = new MemorySegmentCacheStore({
+  defaults: { ttl: 60, swr: 300 },
+});
+
+const router = createRouter({
+  document: Document,
+  urls: urlpatterns,
+  cache: {
+    store,
+    enabled: true,
   },
-}, () => [
-  route("products", ProductList),
-])
+});
 ```
 
-## Custom Cache Keys
+## Cache Stores
+
+### Memory Store
 
-Override the default cache key:
+For single-instance deployments:
 
 ```typescript
-cache({
-  ttl: 3600,
-  key: (ctx) => {
-    // Include user segment in cache key
-    const segment = ctx.request.headers.get("x-user-segment") || "default";
-    return `${segment}:products:${ctx.params.category}`;
-  },
-}, () => [
-  route("products.category", CategoryPage),
-])
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
+
+const store = new MemorySegmentCacheStore({
+  defaults: { ttl: 60, swr: 300 },
+});
 ```
 
-Store-level key modification:
+### Cloudflare Edge Cache Store
+
+For distributed caching on Cloudflare Workers using the Cache API:
 
 ```typescript
-const store = new CFCacheStore({
-  keyGenerator: (ctx, defaultKey) => {
-    const region = ctx.request.cf?.colo || "unknown";
-    return `${region}:${defaultKey}`;
-  },
+import { CFCacheStore } from "@rangojs/router/cache";
+
+const router = createRouter<AppBindings>({
+  document: Document,
+  urls: urlpatterns,
+  cache: (env, ctx) => ({
+    store: new CFCacheStore({
+      ctx,
+      defaults: { ttl: 60, swr: 300 },
+    }),
+    enabled: true,
+  }),
 });
 ```
 
-## Stale-While-Revalidate (SWR)
+### With KV L2 Persistence
 
-SWR serves stale content while fetching fresh data in the background:
-
-```
-Timeline:
-├─ 0 to TTL ─────────┤ Fresh content served
-├─ TTL to TTL+SWR ───┤ Stale content served, revalidation in background
-├─ After TTL+SWR ────┤ Cache expired, new fetch required
-```
+Add a KV namespace for global cross-colo persistence. On Cache API miss, KV is
+checked and hits are promoted back to L1. Writes go to both layers.
 
 ```typescript
-cache({
-  ttl: 60,      // Fresh for 60 seconds
-  swr: 300,     // Stale-but-usable for 5 more minutes
-}, () => [
-  route("feed", FeedPage),
-])
-```
+import { CFCacheStore } from "@rangojs/router/cache";
 
-## Multi-Store Setup
+const router = createRouter<AppBindings>({
+  document: Document,
+  urls: urlpatterns,
+  cache: (env, ctx) => ({
+    store: new CFCacheStore({
+      ctx,
+      kv: env.CACHE_KV, // optional KV namespace binding
+      defaults: { ttl: 60, swr: 300 },
+    }),
+    enabled: true,
+  }),
+});
+```
 
-Use different stores for different data patterns:
+**How the two layers work:**
+
+| Scenario     | L1 (Cache API) | L2 (KV) | Result                        |
+| ------------ | -------------- | ------- | ----------------------------- |
+| Hot request  | HIT            | —       | Serve from L1 (fast)          |
+| Cold colo    | MISS           | HIT     | Serve from KV, promote to L1  |
+| First render | MISS           | MISS    | Render, write to both L1 + KV |
+
+KV entries require `expirationTtl >= 60s`. Short-lived entries (< 60s total TTL)
+are only cached in L1.
+
+## Cache purity & tainted objects
+
+A `cache()` boundary caches everything except loaders, so anything read inside a
+cached handler is **frozen into the shared cache entry** and served to every
+subsequent visitor. To stop one user's request-scoped data from leaking to
+another, request-scoped APIs are guarded inside a cache scope:
+
+| Inside a `cache()` boundary                                     | Behavior                                            |
+| --------------------------------------------------------------- | --------------------------------------------------- |
+| `cookies()` / `headers()` (read or write)                       | **throws** — request-scoped, would poison the entry |
+| `ctx.header()` / `setCookie()` / `setStatus()` / `onResponse()` | **throws** — response side effects lost on a hit    |
+| `ctx.get(var)` where the var is `{ cache: false }`              | **throws** on read                                  |
+| `ctx.set(var, value)` for a cacheable var                       | allowed (children are cached too)                   |
+| Any of the above **inside a loader**                            | **allowed** — loaders always run fresh              |
+
+**Tainted objects.** Request-scoped objects (`ctx`, `env`, `request`) carry an
+internal taint symbol so they are excluded from `"use cache"` cache keys, and
+the cache scope is tracked via async-local state. Two flags back the guards:
+`INSIDE_CACHE_EXEC` (set while a `"use cache"` function runs) and the `cache()`
+DSL scope (`isInsideCacheScope()`). `isInsideCacheScope()` deliberately returns
+`false` inside loaders — which is exactly why loaders are the dynamic holes:
+they may read `cookies()`/`headers()` and re-run on every request.
+
+The fix for "I need request data in a cached route": register a `loader()` and
+**consume it with `useLoader()` in a client component**. The loader is the
+dynamic hole — its data rides the fresh (never-cached) loader segment and is
+rendered in the client component, so it never lands in the cached shell.
+
+This is NOT the same as awaiting the loader in the handler. A cached handler
+that does `await ctx.use(Loader)` and renders the result bakes that per-request
+data straight into the shared cached segment — the loader running "fresh" does
+not help, because its output was inlined into the cached parent, and `ctx.use()`
+is **not** guarded. `ctx.use()` is a server-side escape hatch for non-rendered
+uses (set a ctx var, make a routing decision); never render its result inside a
+cached handler.
 
 ```typescript
-const hotStore = new MemorySegmentCacheStore({
-  defaults: { ttl: 10 }
-});
+// WRONG — throws: cookies() read directly in a cached handler
+cache({ ttl: 60 }, () => [
+  path("/me", () => <Profile id={cookies().get("uid")?.value} />),
+]);
 
-const coldStore = new CFCacheStore({
-  defaults: { ttl: 3600, swr: 7200 }
-});
+// ALSO WRONG (unguarded, but leaks) — the awaited loader data is rendered into
+// the cached handler, so the user's data is frozen into the shared shell.
+cache({ ttl: 60 }, () => [
+  path(
+    "/me",
+    async (ctx) => {
+      const { user } = await ctx.use(MeLoader); // runs fresh…
+      return <Profile user={user} />; // …but inlined into the CACHED segment → leak
+    },
+    { name: "me" },
+    () => [loader(MeLoader)],
+  ),
+]);
 
-export default map<typeof routes>(({ route, cache }) => [
-  // Frequently changing data - short TTL, memory
-  cache({ store: hotStore, ttl: 10 }, () => [
-    route("dashboard", DashboardPage),
-    route("notifications", NotificationsPage),
-  ]),
+// RIGHT — consume the loader in a CLIENT component via useLoader(). The cached
+// route segment holds only the <Profile/> reference; the user data rides the
+// fresh loader segment and renders client-side.
 
-  // Rarely changing data - long TTL, edge cache
-  cache({ store: coldStore, ttl: 3600 }, () => [
-    route("archive", ArchivePage),
-    route("docs", DocsPage),
-  ]),
+// profile.tsx (client component)
+"use client";
+import { useLoader } from "@rangojs/router/client";
+
+export function Profile() {
+  const { user } = useLoader(MeLoader); // fresh per request; never cached
+  return <span>{user.name}</span>;
+}
+
+// urls — register the loader; MeLoader reads cookies() inside the loader (allowed)
+cache({ ttl: 60 }, () => [
+  path("/me", () => <Profile />, { name: "me" }, () => [loader(MeLoader)]),
 ]);
 ```
 
-## Cache Invalidation
+See `/cache-guide` for the full decision guide and the `cache()` vs `"use cache"` comparison.
 
-### Version-Based (Cloudflare)
+## Nested Cache Boundaries
+
+Override cache settings for specific sections:
 
 ```typescript
-import packageJson from "./package.json";
+// Global cache
+cache({ ttl: 300 }, () => [
+  path("/blog", BlogIndex, { name: "blog" }),
 
-const store = new CFCacheStore({
-  version: packageJson.version,  // All cache invalidated on deploy
-});
+  // Override: shorter TTL for dynamic content
+  cache({ ttl: 30 }, () => [
+    path("/blog/:slug", BlogPost, { name: "blogPost" }),
+  ]),
+]);
 ```
 
-### Tag-Based (Future)
+## Custom Cache Store
+
+Create a dedicated store for specific routes:
 
 ```typescript
-cache({
-  tags: (ctx) => [`product:${ctx.params.id}`, "products"],
-}, () => [
-  route("products.detail", ProductDetail),
-])
-
-// Invalidate by tag
-await store.invalidateTag("products");
+const checkoutCache = new MemorySegmentCacheStore({
+  defaults: { ttl: 10 },
+});
+
+// In urls
+cache({ store: checkoutCache }, () => [
+  path("/checkout", CheckoutPage, { name: "checkout" }),
+]);
 ```
 
-## Complete Production Example
+## Complete Example
 
 ```typescript
-// router.tsx
-import { createRSCRouter } from "rsc-router/server";
-import { CFCacheStore } from "rsc-router/cache/cf";
-import packageJson from "./package.json";
+import { urls } from "@rangojs/router";
+import { MemorySegmentCacheStore } from "@rangojs/router/cache";
 
-const router = createRSCRouter<AppEnv>({
-  document: Document,
-  cache: (env) => ({
-    store: new CFCacheStore({
-      baseUrl: "https://rsc-cache.internal/",
-      defaults: { ttl: 300, swr: 3600 },
-      waitUntil: (fn) => env.ctx.waitUntil(fn),
-      version: packageJson.version,
-    }),
-    enabled: env.Bindings.NODE_ENV === "production",
-  }),
+// Custom store for checkout (short TTL)
+const checkoutCache = new MemorySegmentCacheStore({
+  defaults: { ttl: 10 },
 });
 
-// handlers/shop.tsx
-export default map<typeof shopRoutes>(({ route, layout, cache }) => [
-  // Static pages - aggressive caching
-  cache({ ttl: 86400, swr: 604800 }, () => [
-    route("shop.about", AboutPage),
-    route("shop.terms", TermsPage),
+export const urlpatterns = urls(({ path, layout, cache, loader, revalidate }) => [
+  // Public routes with aggressive caching
+  cache({ ttl: 300, swr: 600 }, () => [
+    path("/", HomePage, { name: "home" }),
+    path("/about", AboutPage, { name: "about" }),
   ]),
 
-  // Product listing - moderate caching
-  cache({ ttl: 300, swr: 3600 }, () => [
-    route("shop.products", ProductList),
+  // Blog routes with moderate caching
+  cache({ ttl: 60, swr: 300 }, () => [
+    layout(<BlogLayout />, () => [
+      path("/blog", BlogIndex, { name: "blog" }),
+      path("/blog/:slug", BlogPost, { name: "blogPost" }, () => [
+        loader(BlogPostLoader, () => [cache()]),  // Use boundary cache settings
+      ]),
+    ]),
+  ]),
+
+  // Shop routes with per-loader caching
+  layout(<ShopLayout />, () => [
+    path("/shop/product/:slug", ProductPage, { name: "product" }, () => [
+      loader(ProductLoader, () => [cache({ ttl: 120 })]),
+      loader(CartLoader, () => [
+        revalidate(({ actionId }) => actionId?.includes("Cart") || undefined),
+      ]),
+    ]),
   ]),
 
-  // Product detail - cache with product-specific key
-  cache({
-    ttl: 600,
-    swr: 3600,
-    key: (ctx) => `product:${ctx.params.slug}`,
-  }, () => [
-    route("shop.product", ProductDetail),
+  // Checkout with custom cache store
+  cache({ store: checkoutCache }, () => [
+    path("/checkout", CheckoutPage, { name: "checkout" }),
   ]),
 
-  // User-specific pages - no caching
-  route("shop.cart", CartPage),
-  route("shop.checkout", CheckoutPage),
+  // No cache for account pages
+  path("/account", AccountPage, { name: "account" }),
 ]);
 ```
-
-## Cache Headers (Cloudflare)
-
-CFCacheStore sets these headers for debugging:
-
-- `x-edge-cache-status`: `HIT` or `REVALIDATING`
-- `x-edge-cache-stale-at`: Timestamp when entry becomes stale
-
-## What Gets Cached
-
-- Route segments (components, layouts, loading states)
-- Handle data (breadcrumbs, metadata)
-- **Not cached by default**: Loader data (fetched fresh each request)
-
-To cache loader results, use loader-level caching or external caching strategies.