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>
+  )
+}

test/e2e/app-dir/segment-cache/basic/components/link-accordion.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function LinkAccordion({ href, children }) {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <>
+      <input
+        type="checkbox"
+        checked={isVisible}
+        onChange={() => setIsVisible(!isVisible)}
+        data-link-accordion={href}
+      />
+      {isVisible ? (
+        <Link href={href}>{children}</Link>
+      ) : (
+        <>{children} (link is hidden)</>
+      )}
+    </>
+  )
+}

test/e2e/app-dir/segment-cache/basic/next.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig

test/e2e/app-dir/segment-cache/basic/segment-cache-basic.test.ts

@@ -0,0 +1,450 @@
+import { nextTestSetup } from 'e2e-utils'
+import { createRouterAct } from 'router-act'
+import { waitFor } from 'next-test-utils'
+
+describe('segment cache (basic tests)', () => {
+  const { next, isNextDev } = nextTestSetup({
+    files: __dirname,
+  })
+  if (isNextDev) {
+    test('ppr is disabled', () => {})
+    return
+  }
+
+  it('navigate before any data has loaded into the prefetch cache', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    await act(
+      async () => {
+        // Reveal the link to trigger a prefetch, but block the responses.
+        const link = await act(async () => {
+          const reveal = await browser.elementByCss('input[type="checkbox"]')
+          await reveal.click()
+          return await browser.elementByCss('a')
+        }, 'block')
+
+        // While the prefetches are blocked, navigate to the test page.
+        await act(
+          async () => {
+            // Navigate to the test page
+            await link.click()
+          },
+          {
+            includes: 'Dynamic in nav',
+          }
+        )
+
+        // The static and dynamic content appears simultaneously because everything
+        // was fetched as part of the same navigation request.
+        const nav = await browser.elementById('nav')
+        expect(await nav.innerHTML()).toMatchInlineSnapshot(
+          `"<div><div data-streaming-text-static="Static in nav">Static in nav</div><div data-streaming-text-dynamic="Dynamic in nav">Dynamic in nav</div></div>"`
+        )
+      },
+      // Although the blocked prefetches are allowed to continue when we exit
+      // the outer `act` scope, they were canceled when we navigated to the new
+      // page. So there should be no additional requests in the outer
+      // `act` scope.
+      'no-requests'
+    )
+  })
+
+  it('navigate with prefetched data', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch, but block the responses.
+    const link = await act(async () => {
+      const reveal = await browser.elementByCss('input[type="checkbox"]')
+      await reveal.click()
+      return await browser.elementByCss('a')
+    })
+
+    // Navigate to the test page
+    await act(
+      async () => {
+        await link.click()
+
+        // Because we haven't exited the `act` scope yet, no new data has been
+        // received, but we're still able to immediately render the static
+        // content because it was prefetched.
+        const nav = await browser.elementById('nav')
+        expect(await nav.innerHTML()).toMatchInlineSnapshot(
+          `"<div><div data-streaming-text-static="Static in nav">Static in nav</div><div>Loading... [Dynamic in nav]</div></div>"`
+        )
+      },
+      // The dynamic data streams in after the loading state
+      { includes: 'Dynamic in nav' }
+    )
+
+    const nav = await browser.elementById('nav')
+    await browser.elementByCss('[data-streaming-text-dynamic="Dynamic in nav"]')
+    expect(await nav.innerHTML()).toMatchInlineSnapshot(
+      `"<div><div data-streaming-text-static="Static in nav">Static in nav</div><div data-streaming-text-dynamic="Dynamic in nav">Dynamic in nav</div></div>"`
+    )
+  })
+
+  // TODO(cache-components): With `cacheComponents` enabled, this test is outdated, because
+  // we no longer put the param values in the prefetched RSC response. You'd have to opt into runtime
+  // prefetching for this test to pass until we ship the optimization that would mark this as fully static
+  // if you don't reference any dynamic params in the server components.
+  it.skip('navigate to page with lazily-generated (not at build time) static param', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/lazily-generated-params', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss('a')
+      },
+      { includes: 'target-page-with-lazily-generated-param' }
+    )
+
+    // Navigate to the test page
+    await act(
+      async () => {
+        await link.click()
+
+        // We should be able to render the page with the dynamic param, because
+        // it is lazily generated
+        const target = await browser.elementById(
+          'target-page-with-lazily-generated-param'
+        )
+        expect(await target.innerHTML()).toMatchInlineSnapshot(
+          `"Param: some-param-value"`
+        )
+      },
+      // No additional requests were required, because everything was prefetched
+      'no-requests'
+    )
+  })
+
+  it('prefetch interception route', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/interception/feed', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss('a')
+      },
+      { includes: 'intercepted-photo-page' }
+    )
+
+    // Navigate to the test page
+    await act(
+      async () => {
+        await link.click()
+
+        // The page should render immediately because it was prefetched
+        const div = await browser.elementById('intercepted-photo-page')
+        expect(await div.innerHTML()).toBe('Intercepted photo page')
+      },
+      // No additional requests were required, because everything was prefetched
+      'no-requests'
+    )
+  })
+
+  it('prefetch interception route with params', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/interception-with-params/feed', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss('a')
+      },
+      { includes: 'intercepted-photo-page' }
+    )
+
+    // Navigate to the test page
+    await act(
+      async () => {
+        await link.click()
+
+        // The page should render immediately because it was prefetched
+        const div = await browser.elementById('intercepted-photo-page')
+        expect(await div.innerHTML()).toBe('Intercepted photo page for id "1"')
+      },
+      // No additional requests were required, because everything was prefetched
+      'no-requests'
+    )
+  })
+
+  it('skips dynamic request if prefetched data is fully static', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/fully-static', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss('a[href="/fully-static/target-page"]')
+      },
+      { includes: 'Target' }
+    )
+
+    await act(
+      async () => {
+        await link.click()
+
+        // The page should render immediately because it was prefetched.
+        const div = await browser.elementById('target-page')
+        expect(await div.innerHTML()).toBe('Target')
+      },
+      // No additional requests were required, because everything was prefetched
+      'no-requests'
+    )
+  })
+
+  it('skips static layouts during partially static navigation', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/partially-static', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    const layoutMarkerId = 'static-layout'
+    const layoutMarkerContent = 'Static layout'
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss(
+          'a[href="/partially-static/target-page"]'
+        )
+      },
+      // The static layout should not be included in the dynamic response,
+      // because it was already prefetched.
+      { includes: layoutMarkerContent }
+    )
+
+    await act(async () => {
+      await link.click()
+
+      // The static layout and the loading state of the dynamic page should
+      // render immediately because they were prefetched.
+      const layoutMarker = await browser.elementById(layoutMarkerId)
+      expect(await layoutMarker.innerHTML()).toBe('Static layout')
+      const dynamicDiv = await browser.elementById('dynamic-page')
+      expect(await dynamicDiv.innerHTML()).toBe('Loading...')
+    }, [
+      // The dynamic page is included in the dynamic response.
+      { includes: 'Dynamic page' },
+
+      // The static layout should not be included in the dynamic response,
+      // because it was already prefetched.
+      { includes: layoutMarkerContent, block: 'reject' },
+    ])
+
+    // The dynamic content has streamed in.
+    const dynamicDiv = await browser.elementById('dynamic-page')
+    expect(await dynamicDiv.innerHTML()).toBe('Dynamic page')
+  })
+
+  it('refreshes page segments when navigating to the exact same URL as the current location', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/same-page-nav', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    const linkWithNoHash = await browser.elementByCss(
+      'a[href="/same-page-nav"]'
+    )
+    const linkWithHashA = await browser.elementByCss(
+      'a[href="/same-page-nav#hash-a"]'
+    )
+    const linkWithHashB = await browser.elementByCss(
+      'a[href="/same-page-nav#hash-b"]'
+    )
+
+    async function readRandomNumberFromPage() {
+      const randomNumber = await browser.elementById('random-number')
+      return await randomNumber.textContent()
+    }
+
+    // Navigating to the same URL should refresh the page
+    const randomNumber = await readRandomNumberFromPage()
+    await act(async () => {
+      await linkWithNoHash.click()
+    }, [
+      {
+        includes: 'random-number',
+      },
+      {
+        // Only the page segments should be refreshed, not the layouts.
+        // TODO: We plan to change this in the future.
+        block: 'reject',
+        includes: 'same-page-nav-layout',
+      },
+    ])
+    const randomNumber2 = await readRandomNumberFromPage()
+    expect(randomNumber2).not.toBe(randomNumber)
+
+    // Navigating to a different hash should *not* refresh the page
+    await act(async () => {
+      await linkWithHashA.click()
+    }, 'no-requests')
+    expect(await readRandomNumberFromPage()).toBe(randomNumber2)
+
+    // Navigating to the same hash again should refresh the page
+    await act(
+      async () => {
+        await linkWithHashA.click()
+      },
+      {
+        includes: 'random-number',
+      }
+    )
+    const randomNumber3 = await readRandomNumberFromPage()
+    expect(randomNumber3).not.toBe(randomNumber2)
+
+    // Navigating to a different hash should *not* refresh the page
+    await act(async () => {
+      await linkWithHashB.click()
+    }, 'no-requests')
+    expect(await readRandomNumberFromPage()).toBe(randomNumber3)
+  })
+
+  it('does not throw an error when navigating to a page with a server action', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/with-server-action', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    const link = await act(
+      async () => {
+        await reveal.click()
+        return await browser.elementByCss(
+          'a[href="/with-server-action/target-page"]'
+        )
+      },
+      { includes: 'Target' }
+    )
+
+    await act(
+      async () => {
+        await link.click()
+
+        // The page should render immediately because it was prefetched, and it
+        // should not throw an error.
+        const form = await browser.elementById('target-page')
+        expect(await form.innerHTML()).toBe('Target')
+      },
+      // No additional requests were required, because everything was prefetched
+      'no-requests'
+    )
+  })
+
+  it('does not cause infinite loop with cacheLife("seconds")', async () => {
+    let requestCount = 0
+
+    const browser = await next.browser('/cache-life-seconds-test', {
+      beforePageLoad(page) {
+        page.on('request', (request) => {
+          const url = request.url()
+          if (url.includes('/cache-life-seconds') && url.includes('_rsc')) {
+            requestCount++
+          }
+        })
+      },
+    })
+
+    // Reveal the link to trigger a prefetch
+    const reveal = await browser.elementByCss('input[type="checkbox"]')
+    await reveal.click()
+
+    // Wait for the link to appear
+    const link = await browser.elementByCss('a[href="/cache-life-seconds"]')
+
+    // Give the prefetch a moment to potentially start looping
+    await waitFor(500)
+
+    // Check that we haven't made excessive requests during prefetch
+    expect(requestCount).toBeLessThan(10)
+
+    // Now navigate to the page to ensure it works correctly
+    await link.click()
+
+    // Wait for the page to load
+    const page = await browser.elementById('cache-life-seconds-page')
+    const content = await page.textContent()
+    expect(content).toContain('Cache Life Seconds Page')
+  })
+
+  it('can handle circular references in client component props', async () => {
+    let act: ReturnType<typeof createRouterAct>
+    const browser = await next.browser('/', {
+      beforePageLoad(page) {
+        act = createRouterAct(page)
+      },
+    })
+
+    // Reveal the link to trigger a prefetch.
+    const link = await act(
+      async () => {
+        await browser
+          .elementByCss('input[data-link-accordion="/cycle"]')
+          .click()
+        return browser.elementByCss('a[href="/cycle"]')
+      },
+      { includes: 'testProp' }
+    )
+
+    await act(
+      async () => {
+        await link.click()
+
+        // The page should render immediately because it was prefetched, and it
+        // should show the resolved cycle text.
+        expect(await browser.elementById('cycle-check').text()).toBe(
+          'Cycle resolved'
+        )
+      },
+      // No additional requests were required, because everything was
+      // prefetched.
+      'no-requests'
+    )
+  })
+})