@trieb.work/nextjs-turbo-redis-cache 1.16.2 → 1.18.0

package/test/nextjs-test-projects/next-app-16-3-0-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-3-0-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-3-0-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/nextjs-test-projects/next-app-16-3-0-cache-components/src/app/cache-lab/use-cache-remote/page.tsx

@@ -0,0 +1,85 @@
+import Link from 'next/link';
+import { Suspense } from 'react';
+import { cacheTag, updateTag } from 'next/cache';
+
+async function getRemoteCachedValue() {
+  'use cache: remote';
+
+  cacheTag('cache-lab:remote');
+
+  return {
+    value: Math.random(),
+    computedAt: Date.now(),
+  };
+}
+
+async function triggerUpdateTag() {
+  'use server';
+  updateTag('cache-lab:remote');
+}
+
+async function RemotePanel() {
+  const data = await getRemoteCachedValue();
+
+  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>
+    </div>
+  );
+}
+
+export default function UseCacheRemotePage() {
+  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: remote</h1>
+        <p className="mt-2 text-sm text-slate-600">
+          Exercises the <code>cacheHandlers.remote</code> handler backed by
+          Redis. Values should stay stable across reloads until{' '}
+          <code>updateTag</code> runs.
+        </p>
+      </header>
+
+      <Suspense
+        fallback={
+          <div className="rounded-lg border bg-slate-50 p-5 text-sm text-slate-700">
+            Loading remote cached content…
+          </div>
+        }
+      >
+        <RemotePanel />
+      </Suspense>
+
+      <form action={triggerUpdateTag} className="mt-6">
+        <button
+          className="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"
+        >
+          updateTag(&apos;cache-lab:remote&apos;)
+        </button>
+      </form>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-3-0-cache-components/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/test/nextjs-test-projects/next-app-16-3-0-cache-components/src/app/layout.tsx

@@ -0,0 +1,57 @@
+// This layout is used to test the revalidation logic
+// The layout itself will not create any cache entries
+// It will just be used to render a page
+// If the layout itself uses a fetch request, it will be handled the same way as if the page itself would use a fetch request
+// The layout can be revalidated as well by using revalidatePath with the path of the layout file. However, this will not revalidate the subsequent fetch requests
+
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  // let res;
+  // try {
+  //   res = await fetch(`https://httpbin.org/get`, {
+  //     next: {
+  //       revalidate: 15,
+  //       tags: ['httpbin-layout-revalidate15'],
+  //     },
+  //   });
+  // } catch (e) {
+  //   // ECONNREFUSED is expected during build
+  //   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  //   if (((e as Error).cause as any)?.code !== 'ECONNREFUSED') {
+  //     throw e;
+  //   }
+  // }
+
+  // const data = res?.ok ? await res.json() : { origin: -1 };
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}