test(e2e): Add Next.js cache component nesting scenarios

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/cached-mid-layout/[id]/layout.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// The awaited param puts the request id into the cache key, so a fresh id is a guaranteed miss
+// and the entry cannot come from a build-time fill. `children` passes through as an uncached hole.
+export default async function CachedMidLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife('hours');
+  const { id } = await params;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <div data-testid="cached-mid-layout">
+      <p id="cached-layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/cached-mid-layout/[id]/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="dynamic-leaf">Dynamic leaf: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/dynamic-layouts/[id]/layout-cached-leaf/page.tsx

@@ -0,0 +1,17 @@
+import { cacheLife } from 'next/cache';
+
+async function CachedLeaf({ id }: { id: string }) {
+  'use cache';
+  cacheLife('hours');
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <p id="cached-leaf">
+      {id}:{Date.now()}
+    </p>
+  );
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return <CachedLeaf id={id} />;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/dynamic-layouts/[id]/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { headers } from 'next/headers';
+
+export default async function DynamicLayout({ children }: { children: ReactNode }) {
+  await headers();
+  return <div data-testid="dynamic-layout">{children}</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/layout.tsx

@@ -0,0 +1,11 @@
+import { Suspense, type ReactNode } from 'react';
+
+// The Suspense boundary lets the nested layouts/pages below use request APIs (`headers()`,
+// runtime params) without tripping the Cache Components prerender guards.
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div data-testid="cached-nesting-group">
+      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/mixed-lifetimes/[id]/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// Hard-expires after 2s while the page's cached component lives for hours, so one request can
+// refill the layout while hitting the component: two cached levels with different origin traces.
+export default async function ShortLivedLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife({ revalidate: 1, expire: 2 });
+  const { id } = await params;
+  return (
+    <div data-testid="short-lived-layout">
+      <p id="layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/mixed-lifetimes/[id]/page.tsx

@@ -0,0 +1,19 @@
+import { headers } from 'next/headers';
+import { cacheLife } from 'next/cache';
+
+async function LongLivedComponent({ id }: { id: string }) {
+  'use cache';
+  cacheLife('hours');
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <p id="component-stamp">
+      {id}:{Date.now()}
+    </p>
+  );
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  await headers();
+  return <LongLivedComponent id={id} />;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/a/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="route-a">Route a: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/b/page.tsx

@@ -0,0 +1,6 @@
+import { headers } from 'next/headers';
+
+export default async function Page() {
+  await headers();
+  return <p id="route-b">Route b: {Date.now()}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/(cached-nesting)/shared-layout/[id]/layout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { cacheLife } from 'next/cache';
+
+// One cache entry (keyed by id) shared by the sibling routes `a` and `b` below.
+export default async function SharedLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  'use cache';
+  cacheLife('hours');
+  const { id } = await params;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return (
+    <div data-testid="shared-layout">
+      <p id="shared-layout-stamp">
+        {id}:{Date.now()}
+      </p>
+      {children}
+    </div>
+  );
+}