first commit

test/e2e/app-dir/segment-cache/basic/app/cache-life-seconds-test/page.tsx

@@ -0,0 +1,12 @@
+import { LinkAccordion } from '../../components/link-accordion'
+
+export default function CacheLifeSecondsTestPage() {
+  return (
+    <div>
+      <h1>Cache Life Seconds Test</h1>
+      <LinkAccordion href="/cache-life-seconds">
+        Go to cache-life-seconds page
+      </LinkAccordion>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/cache-life-seconds/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div>
+      <h1>Loading...</h1>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/cache-life-seconds/page.tsx

@@ -0,0 +1,15 @@
+import { cacheLife } from 'next/cache'
+
+export default async function CacheLifeSecondsPage() {
+  'use cache'
+  cacheLife({ stale: 0, revalidate: 1, expire: 60 })
+
+  const randomNumber = Math.random()
+
+  return (
+    <div id="cache-life-seconds-page">
+      <p>Cache Life Seconds Page</p>
+      <p id="random-value">{randomNumber}</p>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/cycle/client.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+export function ClientComponent({ testProp }: { testProp: { self: unknown } }) {
+  return (
+    <div id="cycle-check">
+      {testProp.self === testProp ? 'Cycle resolved' : 'Cycle broken'}
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/cycle/page.tsx

@@ -0,0 +1,8 @@
+import { ClientComponent } from './client'
+
+export default async function Page() {
+  const cycle = { self: null as unknown }
+  cycle.self = cycle
+
+  return <ClientComponent testProp={cycle} />
+}

test/e2e/app-dir/segment-cache/basic/app/fully-static/page.tsx

@@ -0,0 +1,18 @@
+import { LinkAccordion } from '../../components/link-accordion'
+
+export default function FullyStaticStart() {
+  return (
+    <>
+      <p>
+        Demonstrates that when navigating to a fully prefetched route that does
+        not contain any dynamic data, we do not need to perform an additional
+        request on navigation.
+      </p>
+      <ul>
+        <li>
+          <LinkAccordion href="/fully-static/target-page">Target</LinkAccordion>
+        </li>
+      </ul>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/fully-static/target-page/page.tsx

@@ -0,0 +1,3 @@
+export default function Target() {
+  return <div id="target-page">Target</div>
+}

test/e2e/app-dir/segment-cache/basic/app/interception-with-params/feed/(..)photo/[id]/page.tsx

@@ -0,0 +1,17 @@
+export default async function InterceptedPhotoPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  return (
+    <div id="intercepted-photo-page">
+      Intercepted photo page for id {JSON.stringify(id)}
+    </div>
+  )
+}
+
+export function generateStaticParams() {
+  return [{ id: '1' }]
+}

test/e2e/app-dir/segment-cache/basic/app/interception-with-params/feed/layout.tsx

@@ -0,0 +1,8 @@
+export default function FeedLayout({ children }) {
+  return (
+    <div>
+      Feed layout
+      <div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/interception-with-params/feed/page.tsx

@@ -0,0 +1,9 @@
+import { LinkAccordion } from '../../../components/link-accordion'
+
+export default function FeedPage() {
+  return (
+    <LinkAccordion href="/interception-with-params/photo/1">
+      Go to photo
+    </LinkAccordion>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/interception-with-params/photo/[id]/page.tsx

@@ -0,0 +1,13 @@
+export default async function PhotoPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  return `Photo page for id ${JSON.stringify(id)} (normal, not intercepted)`
+}
+
+export function generateStaticParams() {
+  return [{ id: '1' }]
+}

test/e2e/app-dir/segment-cache/basic/app/interception/feed/(..)photo/page.tsx

@@ -0,0 +1,3 @@
+export default function InterceptedPhotoPage() {
+  return <div id="intercepted-photo-page">Intercepted photo page</div>
+}

test/e2e/app-dir/segment-cache/basic/app/interception/feed/layout.tsx

@@ -0,0 +1,8 @@
+export default function FeedLayout({ children }) {
+  return (
+    <div>
+      Feed layout
+      <div>{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/interception/feed/page.tsx

@@ -0,0 +1,5 @@
+import { LinkAccordion } from '../../../components/link-accordion'
+
+export default function FeedPage() {
+  return <LinkAccordion href="/interception/photo">Go to photo</LinkAccordion>
+}

test/e2e/app-dir/segment-cache/basic/app/interception/photo/page.tsx

@@ -0,0 +1,3 @@
+export default function PhotoPage() {
+  return 'Photo page (normal, not intercepted)'
+}

test/e2e/app-dir/segment-cache/basic/app/layout.tsx

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/lazily-generated-params/[param]/page.tsx

@@ -0,0 +1,14 @@
+import { Suspense } from 'react'
+
+async function Content({ params }) {
+  const { param } = await params
+  return <div id="target-page-with-lazily-generated-param">Param: {param}</div>
+}
+
+export default async function Target({ params }) {
+  return (
+    <Suspense fallback="Loading...">
+      <Content params={params} />
+    </Suspense>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/lazily-generated-params/page.tsx

@@ -0,0 +1,24 @@
+import { LinkAccordion } from '../../components/link-accordion'
+
+// TODO: Once the appropriate API exists/is implemented, configure the param to
+// be statically generated on demand but not at build time (`dynamicParams =
+// true` isn't supported when `cacheComponents` is enabled.) For now this test case
+// seems to work without extra configuration but it might not in the future.
+
+export default function LazilyGeneratedParamsStartPage() {
+  return (
+    <>
+      <p>
+        Demonstrates that we can prefetch param that is not generated at build
+        time but is lazily generated on demand
+      </p>
+      <ul>
+        <li>
+          <LinkAccordion href="/lazily-generated-params/some-param-value">
+            Target
+          </LinkAccordion>
+        </li>
+      </ul>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/page.tsx

@@ -0,0 +1,14 @@
+import { LinkAccordion } from '../components/link-accordion'
+
+export default function Page() {
+  return (
+    <>
+      <p>
+        <LinkAccordion href="/test">Go to test page</LinkAccordion>
+      </p>
+      <p>
+        <LinkAccordion href="/cycle">Go to cycle page</LinkAccordion>
+      </p>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/partially-static/page.tsx

@@ -0,0 +1,19 @@
+import { LinkAccordion } from '../../components/link-accordion'
+
+export default function FullyStaticStart() {
+  return (
+    <>
+      <p>
+        Demonstrates that when navigating to a partially static route, the
+        server does not render static layouts that were already prefetched.
+      </p>
+      <ul>
+        <li>
+          <LinkAccordion href="/partially-static/target-page">
+            Target
+          </LinkAccordion>
+        </li>
+      </ul>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/partially-static/target-page/layout.tsx

@@ -0,0 +1,12 @@
+export default function StaticLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <div id="static-layout">Static layout</div>
+      <div>{children}</div>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/partially-static/target-page/page.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+async function Content() {
+  await connection()
+  return 'Dynamic page'
+}
+
+export default function DynamicPage() {
+  return (
+    <div id="dynamic-page">
+      <Suspense fallback="Loading...">
+        <Content />
+      </Suspense>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/same-page-nav/layout.tsx

@@ -0,0 +1,16 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+async function Content({ children }: { children: React.ReactNode }) {
+  // Treat the layout as dynamic so we can detect when it's refreshed
+  await connection()
+  return <div id="same-page-nav-layout">{children}</div>
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback="Loading...">
+      <Content>{children}</Content>
+    </Suspense>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/same-page-nav/page.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import { connection } from 'next/server'
+
+export default async function SamePageNav() {
+  // Treat the page as dynamic so we can detect when it's refreshed
+  await connection()
+
+  return (
+    <>
+      <p>
+        Demonstrates that when navigating to the exact same URL as the current
+        location, we refresh the page segments.
+      </p>
+      <p>
+        Observe that the random number below changes if you click the same link
+        multiple times, but not when you switch between links.
+      </p>
+      <p>
+        Random number (changes on each refresh):{' '}
+        <span id="random-number">
+          {Math.floor(Math.random() * 1_000_000_000)}
+        </span>
+      </p>
+      <ul>
+        <li>
+          <Link href="/same-page-nav">Link to current page</Link>
+        </li>
+        <li id="hash-b">
+          <Link href="/same-page-nav#hash-a">
+            Link to current page with hash fragment <code>#hash-a</code>
+          </Link>
+        </li>
+        <li id="hash-a">
+          <Link href="/same-page-nav#hash-b">
+            Link to current page with hash fragment <code>#hash-b</code>
+          </Link>
+        </li>
+      </ul>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/streaming-text.tsx

@@ -0,0 +1,26 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+async function DynamicText({ text }) {
+  await connection()
+  return text
+}
+
+export function StreamingText({
+  static: staticText,
+  dynamic,
+}: {
+  static: string
+  dynamic: string
+}) {
+  return (
+    <div>
+      <div data-streaming-text-static={staticText}>{staticText}</div>
+      <Suspense fallback={<div>Loading... [{dynamic}]</div>}>
+        <div data-streaming-text-dynamic={dynamic}>
+          <DynamicText text={dynamic} />
+        </div>
+      </Suspense>
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/test/@nav/default.tsx

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function Default() {
+  notFound()
+}

test/e2e/app-dir/segment-cache/basic/app/test/@nav/page.tsx

@@ -0,0 +1,9 @@
+import { StreamingText } from '../../streaming-text'
+
+export default function Page() {
+  return (
+    <div id="nav">
+      <StreamingText static="Static in nav" dynamic="Dynamic in nav" />
+    </div>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/test/layout.tsx

@@ -0,0 +1,17 @@
+import { StreamingText } from '../streaming-text'
+
+export default function Layout({
+  nav,
+  children,
+}: {
+  nav: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <StreamingText static="Static in layout" dynamic="Dynamic in layout" />
+      <div>{nav}</div>
+      <div>{children}</div>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/test/page.tsx

@@ -0,0 +1,5 @@
+import { StreamingText } from '../streaming-text'
+
+export default function Page() {
+  return <StreamingText static="Static in page" dynamic="Dynamic in page" />
+}

test/e2e/app-dir/segment-cache/basic/app/with-server-action/page.tsx

@@ -0,0 +1,19 @@
+import { LinkAccordion } from '../../components/link-accordion'
+
+export default function FullyStaticStart() {
+  return (
+    <>
+      <p>
+        This is a regression test case to ensure that prerendered segments that
+        include server actions do not throw an error when navigating to them.
+      </p>
+      <ul>
+        <li>
+          <LinkAccordion href="/with-server-action/target-page">
+            Target
+          </LinkAccordion>
+        </li>
+      </ul>
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/app/with-server-action/target-page/action.ts

@@ -0,0 +1,5 @@
+'use server'
+
+export async function action() {
+  console.log('Action!')
+}

test/e2e/app-dir/segment-cache/basic/app/with-server-action/target-page/page.tsx

@@ -0,0 +1,9 @@
+import { action } from './action'
+
+export default function Target() {
+  return (
+    <form id="target-page" action={action}>
+      Target
+    </form>
+  )
+}