vercel · huozhi · Feb 10, 2025 · Feb 10, 2025
diff --git a/packages/next/src/client/components/router-reducer/ppr-navigations.ts b/packages/next/src/client/components/router-reducer/ppr-navigations.ts
@@ -797,6 +797,9 @@ function finishPendingCacheNode(
   // a pending promise that needs to be resolved with the dynamic head from
   // the server.
   const head = cacheNode.head
+  // TODO: change head back to ReactNode when metadata
+  // is stably rendered in body
+  // Handle head[0] - viewport
   if (isDeferredRsc(head)) {
     head.resolve(dynamicHead)
   }

diff --git a/packages/next/src/export/types.ts b/packages/next/src/export/types.ts
@@ -62,7 +62,6 @@ export interface ExportPageInput {
   nextConfigOutput?: NextConfigComplete['output']
   enableExperimentalReact?: boolean
   sriEnabled: boolean
-  streamingMetadata: boolean | undefined
 }
 
 export type ExportRouteResult =

diff --git a/packages/next/src/export/worker.ts b/packages/next/src/export/worker.ts
@@ -253,13 +253,6 @@ async function exportPageImpl(
     )
   }
 
-  // During the export phase in next build, if it's using PPR we can serve streaming metadata
-  // when it's available. When we're building the PPR rendering result, we don't need to rely
-  // on the user agent. The result can be determined to serve streaming on infrastructure level.
-  const serveStreamingMetadata = Boolean(
-    isRoutePPREnabled && input.streamingMetadata
-  )
-
   const renderOpts: WorkerRenderOpts = {
     ...components,
     ...input.renderOpts,
@@ -269,7 +262,6 @@ async function exportPageImpl(
     disableOptimizedLoading,
     locale,
     supportsDynamicResponse: false,
-    serveStreamingMetadata,
     experimental: {
       ...input.renderOpts.experimental,
       isRoutePPREnabled,
@@ -424,7 +416,6 @@ export async function exportPages(
             debugOutput: options.debugOutput,
             enableExperimentalReact: needsExperimentalReact(nextConfig),
             sriEnabled: Boolean(nextConfig.experimental.sri?.algorithm),
-            streamingMetadata: nextConfig.experimental.streamingMetadata,
             buildId: input.buildId,
           }),
           // If exporting the page takes longer than the timeout, reject the promise.

diff --git a/packages/next/src/lib/metadata/async-metadata.tsx b/packages/next/src/lib/metadata/async-metadata.tsx
@@ -1,13 +1,21 @@
 'use client'
 
-import { use, type JSX } from 'react'
-import { useServerInsertedMetadata } from '../../server/app-render/metadata-insertion/use-server-inserted-metadata'
+import { use } from 'react'
+import { useServerInsertedHTML } from '../../client/components/navigation'
 
-function ServerInsertMetadata({ promise }: { promise: Promise<JSX.Element> }) {
-  // Apply use() to the metadata promise to suspend the rendering in SSR.
-  const metadata = use(promise)
-  // Insert metadata into the HTML stream through the `useServerInsertedMetadata`
-  useServerInsertedMetadata(() => metadata)
+// We need to wait for metadata on server once it's resolved, and insert into
+// the HTML through `useServerInsertedHTML`. It will suspense in <head> during SSR.
+function ServerInsertMetadata({ promise }: { promise: Promise<any> }) {
+  let metadataToFlush: React.ReactNode = use(promise)
+
+  useServerInsertedHTML(() => {
+    if (metadataToFlush) {
+      const flushing = metadataToFlush
+      // reset to null to ensure we only flush it once
+      metadataToFlush = null
+      return flushing
+    }
+  })
 
   return null
 }

diff --git a/packages/next/src/lib/metadata/metadata.tsx b/packages/next/src/lib/metadata/metadata.tsx
@@ -3,7 +3,7 @@ import type { GetDynamicParamFromSegment } from '../../server/app-render/app-ren
 import type { LoaderTree } from '../../server/lib/app-dir-module'
 import type { CreateServerParamsForMetadata } from '../../server/request/params'
 
-import { Suspense, cache, cloneElement } from 'react'
+import { cache, cloneElement } from 'react'
 import {
   AppleWebAppMeta,
   FormatDetectionMeta,
@@ -38,7 +38,6 @@ import {
   VIEWPORT_BOUNDARY_NAME,
 } from './metadata-constants'
 import { AsyncMetadata } from './async-metadata'
-import { isPostpone } from '../../server/lib/router-utils/is-postpone'
 
 // Use a promise to share the status of the metadata resolving,
 // returning two components `MetadataTree` and `MetadataOutlet`
@@ -148,8 +147,8 @@ export function createMetadataComponents({
   async function resolveFinalMetadata() {
     try {
       return await metadata()
-    } catch (metadataErr) {
-      if (!errorType && isHTTPAccessFallbackError(metadataErr)) {
+    } catch (error) {
+      if (!errorType && isHTTPAccessFallbackError(error)) {
         try {
           return await getNotFoundMetadata(
             tree,
@@ -159,18 +158,7 @@ export function createMetadataComponents({
             createServerParamsForMetadata,
             workStore
           )
-        } catch (notFoundMetadataErr) {
-          // In PPR rendering we still need to throw the postpone error.
-          // If metadata is postponed, React needs to be aware of the location of error.
-          if (isPostpone(notFoundMetadataErr)) {
-            throw notFoundMetadataErr
-          }
-        }
-      }
-      // In PPR rendering we still need to throw the postpone error.
-      // If metadata is postponed, React needs to be aware of the location of error.
-      if (isPostpone(metadataErr)) {
-        throw metadataErr
+        } catch {}
       }
       // We don't actually want to error in this component. We will
       // also error in the MetadataOutlet which causes the error to
@@ -180,15 +168,10 @@ export function createMetadataComponents({
     }
   }
   async function Metadata() {
-    const promise = resolveFinalMetadata()
     if (serveStreamingMetadata) {
-      return (
-        <Suspense fallback={null}>
-          <AsyncMetadata promise={promise} />
-        </Suspense>
-      )
+      return <AsyncMetadata promise={resolveFinalMetadata()} />
     }
-    return await promise
+    return await resolveFinalMetadata()
   }
 
   Metadata.displayName = METADATA_BOUNDARY_NAME