first commit

test/e2e/app-dir/cache-components/app/connection/static-behavior/boundary/page.tsx

@@ -0,0 +1,34 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+import { getSentinelValue } from '../../../getSentinelValue'
+/**
+ * This test case is constructed to demonstrate how using the async form of cookies can lead to a better
+ * prerender with cache components when PPR is on. There is no difference when PPR is off. When PPR is on the second component
+ * can finish rendering before the prerender completes and so we can produce a static shell where the Fallback closest
+ * to Cookies access is read
+ */
+export default async function Page() {
+  return (
+    <>
+      <Suspense fallback="loading...">
+        <Component />
+      </Suspense>
+      <ComponentTwo />
+      <div id="page">{getSentinelValue()}</div>
+    </>
+  )
+}
+
+async function Component() {
+  await connection()
+  return (
+    <div>
+      cookie <span id="foo">foo</span>
+    </div>
+  )
+}
+
+function ComponentTwo() {
+  return <p>footer</p>
+}

test/e2e/app-dir/cache-components/app/connection/static-behavior/pass-deeply/page.tsx

@@ -0,0 +1,46 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+
+import { getSentinelValue } from '../../../getSentinelValue'
+
+export default async function Page() {
+  const pendingConnection = connection()
+  return (
+    <section>
+      <h1>Deep Connection Reader</h1>
+      <p>
+        This component was passed the connection promise returned by
+        `connection()`. It is rendered inside a Suspense boundary.
+      </p>
+      <p>
+        If cacheComponents is turned off the `connection()` call would trigger a
+        dynamic point at the callsite and the suspense boundary would also be
+        blocked for over one second
+      </p>
+      <Suspense
+        fallback={
+          <>
+            <p>loading connection...</p>
+            <div id="fallback">{getSentinelValue()}</div>
+          </>
+        }
+      >
+        <DeepConnectionReader pendingConnection={pendingConnection} />
+      </Suspense>
+    </section>
+  )
+}
+
+async function DeepConnectionReader({
+  pendingConnection,
+}: {
+  pendingConnection: ReturnType<typeof connection>
+}) {
+  await pendingConnection
+  return (
+    <>
+      <p>The connection was awaited</p>
+      <div id="page">{getSentinelValue()}</div>
+    </>
+  )
+}