first commit

test/development/app-dir/cache-components-tasks/cache-components-tasks.test.ts

@@ -0,0 +1,190 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+import * as nodePath from 'node:path'
+import type { Playwright } from '../../../lib/next-webdriver'
+
+describe.each([
+  {
+    description: 'without runtime prefetch configs',
+    hasRuntimePrefetch: false,
+    fixturePath: 'fixtures/without-prefetch-config',
+  },
+  {
+    description: 'with runtime prefetch configs',
+    hasRuntimePrefetch: true,
+    fixturePath: 'fixtures/with-prefetch-config',
+  },
+])(
+  'cache-components-tasks - $description',
+  ({ fixturePath, hasRuntimePrefetch }) => {
+    const { next, isTurbopack, isNextDev } = nextTestSetup({
+      files: nodePath.join(__dirname, fixturePath),
+    })
+
+    function assertLog(
+      logs: Array<{ source: string; message: string }>,
+      message: string,
+      expectedEnvironment: string
+    ) {
+      // Match logs that contain the message, with any environment.
+      const logPattern = new RegExp(
+        `^(?=.*\\b${message}\\b)(?=.*\\b(Cache|Prerender|Prefetch|Prefetchable|Server)\\b).*`
+      )
+      const logMessages = logs.map((log) => log.message)
+      const messages = logMessages.filter((message) => logPattern.test(message))
+
+      // If there's zero or more than one logs that match, the test is not set up correctly.
+      if (messages.length === 0) {
+        throw new Error(
+          `Found no logs matching '${message}':\n\n${logMessages.map((s, i) => `${i}. ${s}`).join('\n')}}`
+        )
+      }
+      if (messages.length > 1) {
+        throw new Error(
+          `Found multiple logs matching '${message}':\n\n${messages.map((s, i) => `${i}. ${s}`).join('\n')}`
+        )
+      }
+
+      // The message should have the expected environment.
+      const actualMessageText = messages[0]
+      const [, actualEnvironment] = actualMessageText.match(logPattern)!
+      expect([actualEnvironment, actualMessageText]).toEqual([
+        expectedEnvironment,
+        expect.stringContaining(message),
+      ])
+    }
+
+    function assertNoUnexpectedErrorsInCli() {
+      // We should not see any errors related to the aborted render.
+      expect(next.cliOutput).not.toContain(
+        'AbortError: This operation was aborted'
+      )
+      // We should not see warnings related to setTimeout.
+      expect(next.cliOutput).not.toContain(
+        "Next.js cannot guarantee that Cache Components will run as expected due to the current runtime's implementation of `setTimeout()`"
+      )
+    }
+
+    async function testInitialLoad(
+      path: string,
+      assertLogs: (browser: Playwright) => Promise<void>
+    ) {
+      const browser = await next.browser(path)
+
+      // Initial load.
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+
+      // After another load (with warm caches) the logs should be the same.
+      await browser.loadPage(next.url + path) // clears old logs
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+
+      if (isNextDev && isTurbopack) {
+        // FIXME:
+        // In Turbopack, requests to the /revalidate route seem to occasionally crash
+        // due to some HMR or compilation issue. `revalidatePath` throws this error:
+        //
+        //   Invariant: static generation store missing in revalidatePath <path>
+        //
+        // This is unrelated to the logic being tested here, so for now, we skip the assertions
+        // that require us to revalidate.
+        console.log('WARNING: skipping revalidation assertions in turbopack')
+        return
+      }
+
+      // After a revalidation the subsequent warmup render must discard stale
+      // cache entries.
+      // This should not affect the environment labels.
+      await revalidatePath(path)
+
+      await browser.loadPage(next.url + path) // clears old logs
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+    }
+
+    async function testNavigation(
+      path: string,
+      assertLogs: (browser: Playwright) => Promise<void>
+    ) {
+      const browser = await next.browser('/')
+
+      // Initial nav (first time loading the page)
+      await browser.elementByCss(`a[href="${path}"]`).click()
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+
+      // Reload, and perform another nav (with warm caches). the logs should be the same.
+      await browser.loadPage(next.url + '/') // clears old logs
+      await browser.elementByCss(`a[href="${path}"]`).click()
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+
+      if (isNextDev && isTurbopack) {
+        // FIXME:
+        // In Turbopack, requests to the /revalidate route seem to occasionally crash
+        // due to some HMR or compilation issue. `revalidatePath` throws this error:
+        //
+        //   Invariant: static generation store missing in revalidatePath <path>
+        //
+        // This is unrelated to the logic being tested here, so for now, we skip the assertions
+        // that require us to revalidate.
+        console.log('WARNING: skipping revalidation assertions in turbopack')
+        return
+      }
+
+      // After a revalidation the subsequent warmup render must discard stale
+      // cache entries.
+      // This should not affect the environment labels.
+      await revalidatePath(path)
+
+      await browser.loadPage(next.url + '/') // clears old logs
+      await browser.elementByCss(`a[href="${path}"]`).click()
+      await retry(() => assertLogs(browser))
+      assertNoUnexpectedErrorsInCli()
+    }
+
+    async function revalidatePath(path: string) {
+      const response = await next.fetch(
+        `/revalidate?path=${encodeURIComponent(path)}`
+      )
+      if (!response.ok) {
+        throw new Error(
+          `Failed to revalidate path: '${path}' - server responded with status ${response.status}`
+        )
+      }
+    }
+
+    const RUNTIME_ENV = hasRuntimePrefetch ? 'Prefetch' : 'Prefetchable'
+
+    describe.each([
+      { description: 'initial load', isInitialLoad: true },
+      { description: 'navigation', isInitialLoad: false },
+    ])('$description', ({ isInitialLoad }) => {
+      it('setImmediate resolves between tasks', async () => {
+        const path = '/simple'
+        const assertLogs = async (browser: Playwright) => {
+          const logs = await browser.log()
+          assertLog(logs, 'after immediate - static - layout', 'Prerender')
+          assertLog(logs, 'after immediate - static - page', 'Prerender')
+
+          assertLog(logs, 'after cookies - layout', RUNTIME_ENV)
+          assertLog(logs, 'after cookies - page', RUNTIME_ENV)
+          assertLog(logs, 'after immediate - runtime - layout', RUNTIME_ENV)
+          assertLog(logs, 'after immediate - runtime - page', RUNTIME_ENV)
+
+          assertLog(logs, 'after connection - layout', 'Server')
+          assertLog(logs, 'after connection - page', 'Server')
+          assertLog(logs, 'after immediate - dynamic - layout', 'Server')
+          assertLog(logs, 'after immediate - dynamic - page', 'Server')
+        }
+
+        if (isInitialLoad) {
+          await testInitialLoad(path, assertLogs)
+        } else {
+          await testNavigation(path, assertLogs)
+        }
+      })
+    })
+  }
+)

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/page.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+export default function Page() {
+  // NOTE: these links must be kept in sync with `path` variables used in the test
+  return (
+    <main>
+      <ul>
+        <li>
+          <Link href="/simple">/simple</Link>
+        </li>
+      </ul>
+    </main>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/revalidate/route.ts

@@ -0,0 +1,8 @@
+import { revalidatePath } from 'next/cache'
+
+export async function GET(request: Request) {
+  const path = new URL(request.url).searchParams.get('path')!
+  revalidatePath(path)
+
+  return Response.json({ revalidated: true })
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/shared.tsx

@@ -0,0 +1,31 @@
+import { cookies } from 'next/headers'
+import { connection } from 'next/server'
+
+function immediate() {
+  return new Promise<void>((resolve) => setImmediate(resolve))
+}
+
+export async function Static({ label }: { label: string }) {
+  await immediate()
+  await immediate()
+  console.log(`after immediate - static - ${label}`)
+  return <div>Static - {label}</div>
+}
+
+export async function Runtime({ label }: { label: string }) {
+  await cookies()
+  console.log(`after cookies - ${label}`)
+  await immediate()
+  await immediate()
+  console.log(`after immediate - runtime - ${label}`)
+  return <div>Runtime - {label}</div>
+}
+
+export async function Dynamic({ label }: { label: string }) {
+  await connection()
+  console.log(`after connection - ${label}`)
+  await immediate()
+  await immediate()
+  console.log(`after immediate - dynamic - ${label}`)
+  return <div>Dynamic - {label}</div>
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/simple/layout.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from 'react'
+import { Static, Runtime, Dynamic } from '../shared'
+
+export const unstable_instant = { prefetch: 'runtime', samples: [{}] }
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div>
+        <Static label="layout" />
+        <Suspense fallback="Loading...">
+          <Runtime label="layout" />
+        </Suspense>
+        <Suspense fallback="Loading...">
+          <Dynamic label="layout" />
+        </Suspense>
+      </div>
+      <hr />
+      {children}
+    </>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/app/simple/page.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react'
+import { Static, Runtime, Dynamic } from '../shared'
+
+export default async function Page() {
+  return (
+    <main>
+      <Static label="page" />
+      <Suspense fallback="Loading...">
+        <Runtime label="page" />
+      </Suspense>
+      <Suspense fallback="Loading...">
+        <Dynamic label="page" />
+      </Suspense>
+    </main>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/with-prefetch-config/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+}
+
+export default nextConfig

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/page.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+export default function Page() {
+  // NOTE: these links must be kept in sync with `path` variables used in the test
+  return (
+    <main>
+      <ul>
+        <li>
+          <Link href="/simple">/simple</Link>
+        </li>
+      </ul>
+    </main>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/revalidate/route.ts

@@ -0,0 +1,8 @@
+import { revalidatePath } from 'next/cache'
+
+export async function GET(request: Request) {
+  const path = new URL(request.url).searchParams.get('path')!
+  revalidatePath(path)
+
+  return Response.json({ revalidated: true })
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/shared.tsx

@@ -0,0 +1,31 @@
+import { cookies } from 'next/headers'
+import { connection } from 'next/server'
+
+function immediate() {
+  return new Promise<void>((resolve) => setImmediate(resolve))
+}
+
+export async function Static({ label }: { label: string }) {
+  await immediate()
+  await immediate()
+  console.log(`after immediate - static - ${label}`)
+  return <div>Static - {label}</div>
+}
+
+export async function Runtime({ label }: { label: string }) {
+  await cookies()
+  console.log(`after cookies - ${label}`)
+  await immediate()
+  await immediate()
+  console.log(`after immediate - runtime - ${label}`)
+  return <div>Runtime - {label}</div>
+}
+
+export async function Dynamic({ label }: { label: string }) {
+  await connection()
+  console.log(`after connection - ${label}`)
+  await immediate()
+  await immediate()
+  console.log(`after immediate - dynamic - ${label}`)
+  return <div>Dynamic - {label}</div>
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/simple/layout.tsx

@@ -0,0 +1,20 @@
+import { Suspense } from 'react'
+import { Static, Runtime, Dynamic } from '../shared'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div>
+        <Static label="layout" />
+        <Suspense fallback="Loading...">
+          <Runtime label="layout" />
+        </Suspense>
+        <Suspense fallback="Loading...">
+          <Dynamic label="layout" />
+        </Suspense>
+      </div>
+      <hr />
+      {children}
+    </>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/app/simple/page.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react'
+import { Static, Runtime, Dynamic } from '../shared'
+
+export default async function Page() {
+  return (
+    <main>
+      <Static label="page" />
+      <Suspense fallback="Loading...">
+        <Runtime label="page" />
+      </Suspense>
+      <Suspense fallback="Loading...">
+        <Dynamic label="page" />
+      </Suspense>
+    </main>
+  )
+}

test/development/app-dir/cache-components-tasks/fixtures/without-prefetch-config/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+}
+
+export default nextConfig