npm - @trieb.work/nextjs-turbo-redis-cache - Versions diffs - 1.10.0-beta.14 → 1.11.0-beta.1 - Mend

@trieb.work/nextjs-turbo-redis-cache 1.10.0-beta.14 → 1.11.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/test/integration/next-app-16-1-1-cache-components/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;

package/test/integration/next-app-16-1-1-cache-components/public/file.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/globe.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/test/integration/next-app-16-1-1-cache-components/public/next.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/public/file.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/public/globe.svg ADDED Viewed

@@ -0,0 +1 @@

package/test/integration/next-app-16-1-1-cache-components/public/public/next.svg ADDED Viewed

@@ -0,0 +1 @@

package/test/integration/next-app-16-1-1-cache-components/public/public/vercel.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/public/window.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/vercel.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/test/integration/next-app-16-1-1-cache-components/public/window.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/test/integration/next-app-16-1-1-cache-components/src/app/api/cached-static-fetch/route.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+let counter = 0;
+export async function GET() {
+  const data = await getSimpleCachedData();
+  return NextResponse.json(data);
+}
+async function getSimpleCachedData() {
+  'use cache';
+  counter++;
+  return {
+    counter,
+    timestamp: Date.now(),
+    message: 'Simple cached data without tags',
+  };
+}

package/test/integration/next-app-16-1-1-cache-components/src/app/api/cached-with-tag/route.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import { cacheTag } from 'next/cache';
+let counter = 0;
+export async function GET() {
+  const data = await getCachedData();
+  return NextResponse.json(data);
+}
+async function getCachedData() {
+  'use cache';
+  cacheTag('test-tag');
+  counter++;
+  return {
+    counter,
+    timestamp: Date.now(),
+    message: 'This data should be cached',
+  };
+}

package/test/integration/next-app-16-1-1-cache-components/src/app/api/revalidate-tag/route.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import { revalidateTag } from 'next/cache';
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { tag } = body;
+  if (!tag) {
+    return NextResponse.json({ error: 'Tag is required' }, { status: 400 });
+  }
+  revalidateTag(tag, { expire: 1 });
+  return NextResponse.json({
+    revalidated: true,
+    tag,
+    timestamp: Date.now(),
+  });
+}

package/test/integration/next-app-16-1-1-cache-components/src/app/api/revalidated-fetch/route.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+let counter = 0;
+export async function GET() {
+  const data = await getCachedData();
+  return NextResponse.json(data);
+}
+async function getCachedData() {
+  'use cache';
+  counter++;
+  return {
+    counter,
+    timestamp: Date.now(),
+    message: 'Revalidated cached data',
+  };
+}

package/test/integration/next-app-16-1-1-cache-components/src/app/cache-lab/cachelife-short/page.tsx ADDED Viewed

@@ -0,0 +1,110 @@
+import Link from 'next/link';
+import { cacheLife, cacheTag, revalidateTag } from 'next/cache';
+import { Suspense } from 'react';
+async function getCacheLifeSample() {
+  'use cache';
+  // Very short timings for manual testing.
+  cacheLife({
+    stale: 2,
+    revalidate: 4,
+    expire: 10,
+  });
+  cacheTag('cache-lab:cachelife-short');
+  return {
+    createdAt: Date.now(),
+    random: Math.random(),
+  };
+}
+async function triggerRevalidateTag() {
+  'use server';
+  revalidateTag('cache-lab:cachelife-short', { expire: 1 });
+}
+async function CachedDataPanel() {
+  const data = await getCacheLifeSample();
+  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">random</dt>
+          <dd data-testid="random" className="font-mono text-slate-700">
+            {data.random}
+          </dd>
+        </div>
+        <div>
+          <dt className="font-medium">cacheLife config</dt>
+          <dd className="font-mono text-slate-700">
+            {'{ stale: 2, revalidate: 4, expire: 10 }'}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+export default function CacheLifeShortPage() {
+  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">cacheLife: short timings</h1>
+        <p className="mt-2 text-sm text-slate-600">
+          This uses <code>cacheLife</code> with short durations so you can
+          observe stale / revalidate / expire behavior quickly.
+        </p>
+      </header>
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading cached content…
+          </div>
+        }
+      >
+        <CachedDataPanel />
+      </Suspense>
+      <form action={triggerRevalidateTag} className="mt-6">
+        <button
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          type="submit"
+        >
+          revalidateTag('cache-lab:cachelife-short')
+        </button>
+      </form>
+      <div className="mt-6 rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+        <div className="space-y-2">
+          <p>
+            Expected: reload a few times. Within a couple seconds, the cached
+            value may become stale; after revalidate, a fresh value should
+            appear.
+          </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/integration/next-app-16-1-1-cache-components/src/app/cache-lab/page.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+import Link from 'next/link';
+export default function CacheLabIndexPage() {
+  return (
+    <main className="mx-auto max-w-5xl p-10">
+      <header className="mb-10">
+        <h1 className="text-3xl font-semibold">Cache Lab</h1>
+        <p className="mt-2 text-slate-600">
+          Manual test pages for Next.js Cache Components (use cache, cacheLife,
+          tags, updateTag/revalidateTag, and Suspense boundaries).
+        </p>
+      </header>
+      <section className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/use-cache-nondeterministic"
+        >
+          <h2 className="text-lg font-medium">use cache: non-deterministic</h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Random/Date/UUID should stay identical across reloads until you
+            invalidate.
+          </p>
+        </Link>
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/cachelife-short"
+        >
+          <h2 className="text-lg font-medium">cacheLife: short timings</h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Uses very small stale/revalidate/expire values so you can observe
+            SWR + expiry quickly.
+          </p>
+        </Link>
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/tag-invalidation"
+        >
+          <h2 className="text-lg font-medium">
+            Tags: updateTag vs revalidateTag
+          </h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Cached component tagged via cacheTag. Trigger updateTag (immediate)
+            or revalidateTag (SWR).
+          </p>
+        </Link>
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/stale-while-revalidate"
+        >
+          <h2 className="text-lg font-medium">
+            SWR: stale-while-revalidate (slow)
+          </h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Forces slow recomputation so you can see whether stale is served
+            immediately while refresh happens in the background.
+          </p>
+        </Link>
+        <Link
+          className="rounded-lg border p-5 hover:bg-slate-50"
+          href="/cache-lab/runtime-data-suspense"
+        >
+          <h2 className="text-lg font-medium">Runtime data + Suspense</h2>
+          <p className="mt-1 text-sm text-slate-600">
+            Reads cookies() at request time in a non-cached component and passes
+            it into a cached component to show correct boundaries.
+          </p>
+        </Link>
+      </section>
+      <section className="mt-12 rounded-lg border bg-slate-50 p-5">
+        <h3 className="font-medium">How to use</h3>
+        <div className="mt-2 space-y-2 text-sm text-slate-700">
+          <p>
+            Open each page in 2 tabs and compare behavior while reloading.
+            Observe which values stay stable, and which update.
+          </p>
+          <p>
+            Use the buttons on each page to trigger tag invalidation and observe
+            how quickly new content becomes visible.
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}

package/test/integration/next-app-16-1-1-cache-components/src/app/cache-lab/runtime-data-suspense/page.tsx ADDED Viewed

@@ -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/integration/next-app-16-1-1-cache-components/src/app/cache-lab/stale-while-revalidate/page.tsx ADDED Viewed

@@ -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>
+  );
+}