@trieb.work/nextjs-turbo-redis-cache 1.14.1 → 1.15.1

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/runtime-data-suspense/page.tsx

@@ -0,0 +1,127 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+import { cookies } from 'next/headers';
+
+export default function RuntimeDataSuspensePage() {
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">Runtime data + Suspense</h1>
+        <p className="mt-2 text-sm text-slate-600">
+          This page reads <code>cookies()</code> at request time (runtime data),
+          then passes a value into a cached function. The runtime read is
+          wrapped in <code>{'<Suspense>'}</code> so it is an explicit dynamic
+          boundary.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading runtime cookie…
+          </div>
+        }
+      >
+        <RuntimeCookieBlock />
+      </Suspense>
+
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <div className="space-y-2">
+          <p>
+            Expected: changing the cookie changes the <em>input</em> to the
+            cached function, producing a different cache entry.
+          </p>
+          <p>
+            The cached function itself uses <code>use cache</code>, so for the
+            same cookie value, it should return a stable payload across reloads.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+async function setCookie(value: string) {
+  'use server';
+  const store = await cookies();
+  store.set('cache_lab_session', value, { path: '/' });
+}
+
+async function setCookieUserA() {
+  'use server';
+  await setCookie('user-a');
+}
+
+async function setCookieUserB() {
+  'use server';
+  await setCookie('user-b');
+}
+
+async function RuntimeCookieBlock() {
+  const store = await cookies();
+  const sessionId = store.get('cache_lab_session')?.value || 'anonymous';
+
+  return (
+    <div className="rounded-lg border p-5">
+      <div className="mb-4 text-sm">
+        <div>
+          <span className="font-medium">cookie cache_lab_session:</span>{' '}
+          <span data-testid="cookie" className="font-mono text-slate-700">
+            {sessionId}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <form action={setCookieUserA}>
+          <button
+            className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+            type="submit"
+          >
+            Set cookie: user-a
+          </button>
+        </form>
+        <form action={setCookieUserB}>
+          <button
+            className="w-full rounded-md border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+            type="submit"
+          >
+            Set cookie: user-b
+          </button>
+        </form>
+      </div>
+
+      <div className="mt-5">
+        <CachedPerSession sessionId={sessionId} />
+      </div>
+    </div>
+  );
+}
+
+async function CachedPerSession({ sessionId }: { sessionId: string }) {
+  'use cache';
+
+  const payload = {
+    sessionId,
+    createdAt: Date.now(),
+    random: Math.random(),
+  };
+
+  return (
+    <div className="rounded-md bg-slate-50 p-4 text-sm">
+      <div className="font-medium">Cached payload (keyed by sessionId)</div>
+      <pre data-testid="payload" className="mt-2 overflow-x-auto text-xs">
+        {JSON.stringify(payload, null, 2)}
+      </pre>
+    </div>
+  );
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/stale-while-revalidate/page.tsx

@@ -0,0 +1,130 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+import { cacheLife, cacheTag, revalidateTag } from 'next/cache';
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function getSlowTaggedValue() {
+  'use cache';
+
+  // Keep this short so you can observe SWR behavior quickly.
+  // stale: after 2s the entry is considered stale
+  // revalidate: after 8s Next may attempt to refresh
+  // expire: after 60s it must be recomputed
+  cacheLife({ stale: 2, revalidate: 8, expire: 60 });
+  cacheTag('cache-lab:swr');
+
+  // Make regeneration visibly expensive so you can tell whether the request was
+  // served from stale cache (fast) or blocked on recomputation (slow).
+  await sleep(3000);
+
+  return {
+    computedAt: Date.now(),
+    value: Math.random(),
+    note: 'This function always sleeps ~3s when it actually executes.',
+  };
+}
+
+async function triggerRevalidateTag() {
+  'use server';
+  revalidateTag('cache-lab:swr', { expire: 1 });
+}
+
+async function CachedPanel() {
+  const data = await getSlowTaggedValue();
+
+  return (
+    <div className="rounded-lg border p-5">
+      <div className="text-sm text-slate-700">
+        <div>
+          <span className="font-medium">computedAt:</span>{' '}
+          <span data-testid="computedAt" className="font-mono">
+            {data.computedAt}
+          </span>
+        </div>
+        <div className="mt-1">
+          <span className="font-medium">value:</span>{' '}
+          <span data-testid="value" className="font-mono">
+            {data.value}
+          </span>
+        </div>
+        <div className="mt-1 text-xs text-slate-500">{data.note}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function StaleWhileRevalidatePage() {
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">
+          SWR: stale-while-revalidate (slow)
+        </h1>
+        <p className="mt-2 text-sm text-slate-600">
+          This page is designed to make stale-while-revalidate behavior visible.
+          The cached function sleeps ~3 seconds whenever it really runs.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading cached content… (first time can take ~3s)
+          </div>
+        }
+      >
+        <CachedPanel />
+      </Suspense>
+
+      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+        <form action={triggerRevalidateTag}>
+          <button
+            className="w-full rounded-md border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+            type="submit"
+          >
+            revalidateTag('cache-lab:swr')
+          </button>
+        </form>
+      </div>
+
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <div className="space-y-2">
+          <p className="font-medium">How to observe SWR (non-blocking)</p>
+          <p>1) Load this page once (expect ~3s on the very first load).</p>
+          <p>
+            2) Wait ~3 seconds so the entry becomes <code>stale</code>{' '}
+            (stale=2s).
+          </p>
+          <p>
+            3) Click <code>revalidateTag</code>.
+          </p>
+          <p>4) Immediately reload the page:</p>
+          <div className="rounded bg-white p-3 text-xs">
+            If SWR is working, the reload should be fast and you may still see
+            the old computedAt/value (stale served).
+            <br />
+            Reload again after ~3-4 seconds and you should see a new
+            computedAt/value.
+            <br />
+            If SWR is not working, the reload will block for ~3 seconds.
+          </div>
+          <div className="text-xs text-slate-500">
+            cacheLife: {'{ stale: 2, revalidate: 8, expire: 60 }'}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/tag-invalidation/page.tsx

@@ -0,0 +1,127 @@
+import Link from 'next/link';
+import { cacheTag, updateTag, revalidateTag, cacheLife } from 'next/cache';
+import { Suspense } from 'react';
+
+async function getTaggedData() {
+  'use cache';
+
+  cacheLife({ stale: 5, revalidate: 10, expire: 60 });
+  cacheTag('cache-lab:tag');
+
+  return {
+    value: Math.random(),
+    createdAt: Date.now(),
+  };
+}
+
+async function doUpdateTag() {
+  'use server';
+  updateTag('cache-lab:tag');
+}
+
+async function doRevalidateTag() {
+  'use server';
+  revalidateTag('cache-lab:tag', { expire: 1 });
+}
+
+async function CachedTaggedPanel() {
+  const data = await getTaggedData();
+  return (
+    <div className="rounded-lg border p-5">
+      <dl className="grid grid-cols-1 gap-3 text-sm">
+        <div>
+          <dt className="font-medium">createdAt</dt>
+          <dd data-testid="createdAt" className="font-mono text-slate-700">
+            {data.createdAt}
+          </dd>
+        </div>
+        <div>
+          <dt className="font-medium">value</dt>
+          <dd data-testid="value" className="font-mono text-slate-700">
+            {data.value}
+          </dd>
+        </div>
+        <div>
+          <dt className="font-medium">cacheLife</dt>
+          <dd className="font-mono text-slate-700">
+            {'{ stale: 5, revalidate: 10, expire: 60 }'}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export default function TagInvalidationPage() {
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">
+          Tags: updateTag vs revalidateTag
+        </h1>
+        <p className="mt-2 text-sm text-slate-600">
+          This page caches a function tagged with{' '}
+          <code>cacheTag('cache-lab:tag')</code>. Use the buttons to invalidate.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading cached tagged content…
+          </div>
+        }
+      >
+        <CachedTaggedPanel />
+      </Suspense>
+
+      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+        <form action={doUpdateTag}>
+          <button
+            className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+            type="submit"
+          >
+            updateTag('cache-lab:tag')
+          </button>
+        </form>
+
+        <form action={doRevalidateTag}>
+          <button
+            className="w-full rounded-md border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50"
+            type="submit"
+          >
+            revalidateTag('cache-lab:tag')
+          </button>
+        </form>
+      </div>
+
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <div className="space-y-2">
+          <p>Expected: values should stay stable on reloads.</p>
+          <p>
+            <strong>updateTag</strong> is intended for “expire + immediately
+            refresh within the same request” (used after mutations in Server
+            Actions).
+          </p>
+          <p>
+            <strong>revalidateTag</strong> invalidates tagged entries with
+            stale-while-revalidate behavior.
+          </p>
+          <p>
+            This page deliberately puts the async work behind{' '}
+            <code>{'<Suspense>'}</code> to avoid the "Blocking Route" warning.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/cache-lab/use-cache-nondeterministic/page.tsx

@@ -0,0 +1,110 @@
+import Link from 'next/link';
+import { cacheTag, updateTag } from 'next/cache';
+
+async function getCachedNonDeterministicValues() {
+  'use cache';
+
+  cacheTag('cache-lab:nondet');
+
+  const random1 = Math.random();
+  const random2 = Math.random();
+  const now = Date.now();
+  const uuid = crypto.randomUUID();
+  const bytes = crypto.getRandomValues(new Uint8Array(8));
+
+  return {
+    random1,
+    random2,
+    now,
+    uuid,
+    bytes: Array.from(bytes),
+  };
+}
+
+async function refresh() {
+  'use server';
+  updateTag('cache-lab:nondet');
+}
+
+export default async function UseCacheNonDeterministicPage() {
+  const data = await getCachedNonDeterministicValues();
+
+  return (
+    <main className="mx-auto max-w-3xl p-10">
+      <div className="mb-6">
+        <Link
+          className="text-sm text-blue-600 hover:underline"
+          href="/cache-lab"
+        >
+          ← Back to Cache Lab
+        </Link>
+      </div>
+
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold">use cache: non-deterministic</h1>
+        <p className="mt-2 text-sm text-slate-600">
+          Per docs, non-deterministic operations inside a <code>use cache</code>{' '}
+          scope run once and then stay stable for all requests until you
+          invalidate.
+        </p>
+      </header>
+
+      <form action={refresh} className="mb-6">
+        <button
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          type="submit"
+        >
+          updateTag('cache-lab:nondet')
+        </button>
+      </form>
+
+      <div className="rounded-lg border p-5">
+        <dl className="grid grid-cols-1 gap-3 text-sm">
+          <div>
+            <dt className="font-medium">random1</dt>
+            <dd data-testid="random1" className="font-mono text-slate-700">
+              {data.random1}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">random2</dt>
+            <dd data-testid="random2" className="font-mono text-slate-700">
+              {data.random2}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">now (Date.now)</dt>
+            <dd data-testid="now" className="font-mono text-slate-700">
+              {data.now}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">uuid</dt>
+            <dd data-testid="uuid" className="font-mono text-slate-700">
+              {data.uuid}
+            </dd>
+          </div>
+          <div>
+            <dt className="font-medium">bytes</dt>
+            <dd data-testid="bytes" className="font-mono text-slate-700">
+              {JSON.stringify(data.bytes)}
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <div className="space-y-2">
+          <p>
+            Expected: Reloading the page should keep values identical across
+            requests.
+          </p>
+          <p>
+            Click the button (Server Action) to run <code>updateTag</code> and
+            refresh the cached entry.
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

package/test/{integration/next-app-16-0-3 → nextjs-test-projects/next-app-16-2-6-cache-components}/src/app/layout.tsx

@@ -50,8 +50,6 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        Layout TS: {Date.now()}
-        {/* Layout counter: {data.origin} */}
         {children}
       </body>
     </html>

package/test/nextjs-test-projects/next-app-16-2-6-cache-components/src/app/update-tag-test/page.tsx

@@ -0,0 +1,22 @@
+import { updateTag } from 'next/cache';
+
+let clicks = 0;
+
+async function increment() {
+  'use server';
+
+  clicks++;
+  updateTag('update-tag-test');
+}
+
+export default function UpdateTagTestPage() {
+  return (
+    <main style={{ padding: 40, fontFamily: 'system-ui, sans-serif' }}>
+      <h1>UpdateTag Test</h1>
+      <form action={increment}>
+        <p data-testid="clicks">Clicks: {clicks}</p>
+        <button type="submit">Increment</button>
+      </form>
+    </main>
+  );
+}

package/{tests → test/playwright}/update-tag.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 // This test assumes the Next 16 app is already running, e.g.:
-//   cd test/integration/next-app-16-0-3 && pnpm dev
+//   cd test/nextjs-test-projects/next-app-16-0-11 && pnpm dev
 // on the same origin as baseURL.
 
 test('button click triggers Server Action using updateTag', async ({

package/test/{integration → vitest/integration}/build-id-prefix.integration.test.ts

@@ -5,7 +5,7 @@ import path from 'path';
 import fs from 'fs';
 import fetch from 'node-fetch';
 
-const NEXT_APP = 'next-app-15-4-7';
+const NEXT_APP = 'next-app-15-4-11';
 const PORT = 3075;
 const BASE_URL = `http://localhost:${PORT}`;
 
@@ -28,7 +28,7 @@ describe('BUILD_ID-based key prefix (Next handlers)', () => {
   let buildId: string;
 
   beforeAll(async () => {
-    appDir = path.join(__dirname, NEXT_APP);
+    appDir = path.join(__dirname, '..', '..', 'nextjs-test-projects', NEXT_APP);
 
     // Ensure clean env so BUILD_ID precedence kicks in
     delete (process.env as Record<string, string | undefined>).KEY_PREFIX;

package/test/{cache-components/cache-components.integration.spec.ts → vitest/integration/cache-components/cache-components.integration.test.ts}

@@ -11,6 +11,10 @@ describe('Next.js 16 Cache Components Integration', () => {
   let redisClient: RedisClientType;
   let keyPrefix: string;
 
+  async function delay(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
   beforeAll(async () => {
     // Connect to Redis
     redisClient = createClient({
@@ -23,12 +27,16 @@ describe('Next.js 16 Cache Components Integration', () => {
     keyPrefix = `cache-components-test-${Math.random().toString(36).substring(7)}`;
     process.env.VERCEL_URL = keyPrefix;
 
-    // Build and start Next.js app
+    const cacheComponentsApp =
+      process.env.CACHE_COMPONENTS_APP || 'next-app-16-2-6-cache-components';
+
     const appDir = path.join(
       __dirname,
       '..',
-      'integration',
-      'next-app-16-2-3-cache-components',
+      '..',
+      '..',
+      'nextjs-test-projects',
+      cacheComponentsApp,
     );
 
     console.log('Installing Next.js app dependencies...');
@@ -155,6 +163,41 @@ describe('Next.js 16 Cache Components Integration', () => {
     }, 20_000);
   });
 
+  describe('cacheLife functionality', () => {
+    it('should respect expire window and eventually return refreshed data', async () => {
+      const res1 = await fetch(`${BASE_URL}/api/cached-with-cachelife`);
+      const data1 = await res1.json();
+      expect(data1.counter).toBe(1);
+
+      const res2 = await fetch(`${BASE_URL}/api/cached-with-cachelife`);
+      const data2 = await res2.json();
+      expect(data2.counter).toBe(data1.counter);
+      expect(data2.timestamp).toBe(data1.timestamp);
+
+      await delay(6500);
+
+      let refreshedData: any;
+      for (let i = 0; i < 10; i++) {
+        const res = await fetch(`${BASE_URL}/api/cached-with-cachelife`);
+        const data = await res.json();
+
+        if (
+          data.counter !== data1.counter ||
+          data.timestamp !== data1.timestamp
+        ) {
+          refreshedData = data;
+          break;
+        }
+
+        await delay(500);
+      }
+
+      expect(refreshedData).toBeDefined();
+      expect(refreshedData.counter).toBeGreaterThan(data1.counter);
+      expect(refreshedData.timestamp).not.toBe(data1.timestamp);
+    }, 20_000);
+  });
+
   describe('Redis cache handler integration', () => {
     it('should call cache handler get and set methods', async () => {
       // Make request to trigger cache (don't clear first)

package/test/{cache-components/redis-kill-reconnect.spec.ts → vitest/integration/cache-components/redis-kill-reconnect.test.ts}

@@ -1,6 +1,21 @@
 import { describe, it, expect } from 'vitest';
 import { spawn } from 'child_process';
 import path from 'path';
+import { spawnSync } from 'child_process';
+
+function hasContainerRuntime() {
+  const podman = spawnSync('podman', ['--version'], {
+    encoding: 'utf8',
+    timeout: 3_000,
+  });
+  if (!podman.error && (podman.status ?? 1) === 0) return true;
+
+  const docker = spawnSync('docker', ['--version'], {
+    encoding: 'utf8',
+    timeout: 3_000,
+  });
+  return !docker.error && (docker.status ?? 1) === 0;
+}
 
 function runNode(script: string, timeoutMs = 120_000) {
   return new Promise<{ code: number; stdout: string; stderr: string }>(
@@ -26,13 +41,19 @@ function runNode(script: string, timeoutMs = 120_000) {
 }
 
 describe('redis kill/reconnect end-to-end (both handlers)', () => {
-  it('survives redis restart without Socket already opened', async () => {
-    const script = path.join(__dirname, 'scripts', 'redis-kill-reconnect.ts');
+  const runOrSkip = hasContainerRuntime() ? it : it.skip;
 
-    const res = await runNode(script, 180_000);
+  runOrSkip(
+    'survives redis restart without Socket already opened',
+    async () => {
+      const script = path.join(__dirname, 'scripts', 'redis-kill-reconnect.ts');
 
-    expect(res.code).toBe(0);
-    expect(res.stdout).toContain('OK');
-    expect(res.stderr).not.toContain('Socket already opened');
-  }, 180_000);
+      const res = await runNode(script, 180_000);
+
+      expect(res.code).toBe(0);
+      expect(res.stdout).toContain('OK');
+      expect(res.stderr).not.toContain('Socket already opened');
+    },
+    180_000,
+  );
 });