[Segment Cache] Respond with 204 on cache miss (#73649)

Currently, when the client prefetches a segment, the server responds
with a 404 if it cannot fulfill the request. This updates it to respond
with a 204 No Content instead, since it's not an error for the client to
request a segment whose prefetch hasn't been generated.

When responding with 204, the server also sends the 'x-nextjs-postponed'
header, but only if PPR is enabled for the route. The client can use the
absence of this header to distinguish between a regular cache miss and a
miss due to PPR being disabled. In a later PR, I will update the client
to use this information to fall back to the non-PPR behavior.

Author: acdlite

packages/next/src/client/components/segment-cache/cache.ts

@@ -500,8 +500,17 @@ async function fetchRouteOnCacheMiss(
   const nextUrl = key.nextUrl
   try {
     const response = await fetchSegmentPrefetchResponse(href, '/_tree', nextUrl)
-    if (!response || !response.ok || !response.body) {
-      // Received an unexpected response.
+    if (
+      !response ||
+      !response.ok ||
+      // 204 is a Cache miss. Though theoretically this shouldn't happen when
+      // PPR is enabled, because we always respond to route tree requests, even
+      // if it needs to be blockingly generated on demand.
+      response.status === 204 ||
+      !response.body
+    ) {
+      // Server responded with an error, or with a miss. We should still cache
+      // the response, but we can try again after 10 seconds.
       rejectRouteCacheEntry(entry, Date.now() + 10 * 1000)
       return
     }
@@ -594,9 +603,14 @@ async function fetchSegmentEntryOnCacheMiss(
       accessToken === '' ? segmentPath : `${segmentPath}.${accessToken}`,
       routeKey.nextUrl
     )
-    if (!response || !response.ok || !response.body) {
-      // Server responded with an error. We should still cache the response, but
-      // we can try again after 10 seconds.
+    if (
+      !response ||
+      !response.ok ||
+      response.status === 204 || // Cache miss
+      !response.body
+    ) {
+      // Server responded with an error, or with a miss. We should still cache
+      // the response, but we can try again after 10 seconds.
       rejectSegmentCacheEntry(segmentCacheEntry, Date.now() + 10 * 1000)
       return
     }

packages/next/src/server/base-server.ts

@@ -3044,49 +3044,55 @@ export default abstract class Server<
       }
     )
 
-    if (
-      isRoutePPREnabled &&
-      isPrefetchRSCRequest &&
-      typeof segmentPrefetchHeader === 'string'
-    ) {
-      if (cacheEntry?.value?.kind === CachedRouteKind.APP_PAGE) {
-        // This is a prefetch request for an individual segment's static data.
-        // Unless the segment is fully dynamic, the data should have already been
-        // loaded into the cache, when the page itself was generated. So we should
-        // always either return the cache entry. If no cache entry is available,
-        // it's a 404 — either the segment is fully dynamic, or an invalid segment
-        // path was requested.
-        if (cacheEntry.value.segmentData) {
-          const matchedSegment = cacheEntry.value.segmentData.get(
-            segmentPrefetchHeader
-          )
-          if (matchedSegment !== undefined) {
-            return {
-              type: 'rsc',
-              body: RenderResult.fromStatic(matchedSegment),
-              // TODO: Eventually this should use revalidate time of the
-              // individual segment, not the whole page.
-              revalidate: cacheEntry.revalidate,
-            }
+    if (isPrefetchRSCRequest && typeof segmentPrefetchHeader === 'string') {
+      // This is a prefetch request issued by the client Segment Cache. These
+      // should never reach the application layer (lambda). We should either
+      // respond from the cache (HIT) or respond with 204 No Content (MISS).
+      if (
+        cacheEntry !== null &&
+        // This is always true at runtime but is needed to refine the type
+        // of cacheEntry.value to CachedAppPageValue, because the outer
+        // ResponseCacheEntry is not a discriminated union.
+        cacheEntry.value?.kind === CachedRouteKind.APP_PAGE &&
+        cacheEntry.value.segmentData
+      ) {
+        const matchedSegment = cacheEntry.value.segmentData.get(
+          segmentPrefetchHeader
+        )
+        if (matchedSegment !== undefined) {
+          // Cache hit
+          return {
+            type: 'rsc',
+            body: RenderResult.fromStatic(matchedSegment),
+            // TODO: Eventually this should use revalidate time of the
+            // individual segment, not the whole page.
+            revalidate: cacheEntry.revalidate,
           }
         }
-        // If the segment is not found, return a 404. Since this is an RSC
-        // request, there's no reason to render a 404 page; just return an
-        // empty response.
-        res.statusCode = 404
-        return {
-          type: 'rsc',
-          body: RenderResult.fromStatic(''),
-          revalidate: cacheEntry.revalidate,
-        }
-      } else {
-        // Segment prefetches should never reach the application layer. If
-        // there's no cache entry for this page, it's a 404.
-        res.statusCode = 404
-        return {
-          type: 'rsc',
-          body: RenderResult.fromStatic(''),
-        }
+      }
+
+      // Cache miss. Either a cache entry for this route has not been generated,
+      // or there's no match for the requested segment. Regardless, respond with
+      // a 204 No Content. We don't bother to respond with 404 in cases where
+      // the segment does not exist, because these requests are only issued by
+      // the client cache.
+      // TODO: If this is a request for the route tree (the special /_tree
+      // segment), we should *always* respond with a tree, even if PPR
+      // is disabled.
+      res.statusCode = 204
+      if (isRoutePPREnabled) {
+        // Set a header to indicate that PPR is enabled for this route. This
+        // lets the client distinguish between a regular cache miss and a cache
+        // miss due to PPR being disabled.
+        // NOTE: Theoretically, when PPR is enabled, there should *never* be
+        // a cache miss because we should generate a fallback route. So this
+        // is mostly defensive.
+        res.setHeader(NEXT_DID_POSTPONE_HEADER, '1')
+      }
+      return {
+        type: 'rsc',
+        body: RenderResult.fromStatic(''),
+        revalidate: cacheEntry?.revalidate,
       }
     }
 

test/e2e/app-dir/ppr-navigations/simple/per-segment-prefetching.test.ts

@@ -64,9 +64,9 @@ describe('per segment prefetching', () => {
     expect(childResponseText).toInclude('"rsc"')
   })
 
-  it('respond with 404 if the segment does not have prefetch data', async () => {
+  it('respond with 204 if the segment does not have prefetch data', async () => {
     const response = await prefetch('/en', '/does-not-exist')
-    expect(response.status).toBe(404)
+    expect(response.status).toBe(204)
     const responseText = await response.text()
     expect(responseText.trim()).toBe('')
   })

test/e2e/app-dir/segment-cache/incremental-opt-in/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/incremental-opt-in/app/page.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <ul>
+      <li>
+        <Link href="/ppr-enabled">Page with PPR enabled</Link>
+      </li>
+      <li>
+        <Link href="/ppr-enabled/dynamic-param">
+          Page with PPR enabled but has dynamic param
+        </Link>
+      </li>
+      <li>
+        <Link href="/ppr-disabled">Page with PPR disabled</Link>
+      </li>
+    </ul>
+  )
+}

test/e2e/app-dir/segment-cache/incremental-opt-in/app/ppr-disabled/page.tsx

@@ -0,0 +1,3 @@
+export default function PPRDisabled() {
+  return '(intentionally empty)'
+}

test/e2e/app-dir/segment-cache/incremental-opt-in/app/ppr-enabled/[dynamic-param]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return '(intentionally empty)'
+}

test/e2e/app-dir/segment-cache/incremental-opt-in/app/ppr-enabled/layout.tsx

@@ -0,0 +1,9 @@
+export const experimental_ppr = true
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

test/e2e/app-dir/segment-cache/incremental-opt-in/app/ppr-enabled/page.tsx

@@ -0,0 +1,3 @@
+export default function PPREnabled() {
+  return '(intentionally empty)'
+}

test/e2e/app-dir/segment-cache/incremental-opt-in/next.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    ppr: 'incremental',
+    dynamicIO: true,
+    clientSegmentCache: true,
+  },
+}
+
+module.exports = nextConfig