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

package/test/integration/next-app-16-1-1-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/integration/next-app-16-1-1-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-1-1-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/integration/next-app-16-1-1-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>
+  );
+}