Cleanup Render Result (#58782)

This improves some of the typings around the `RenderResult` returned during renders. Previously it had a single large metadata object that was shared across both the pages and app render pipelines. To add more type safety, this splits the types used by each of the render pipelines into their own types while still allowing the default `RenderResult` to reference metadata from either render pipeline.

This also improved the flight data generation for app renders. Previously, the promise was inlined, and errors were swallowed. With the advent of improvements in #58779 the postpone errors are no longer returned by the flight generation and are instead handled correctly inside the render by React so it can emit properly postponed flight data.

Besides that there was some whitespace changes, so hiding whitespace differences during review should make it much clearer to review!

Author: wyattjoh

packages/next/src/build/utils.ts

@@ -1127,10 +1127,16 @@ export async function buildStaticPaths({
   }
 }
 
+export type AppConfigDynamic =
+  | 'auto'
+  | 'error'
+  | 'force-static'
+  | 'force-dynamic'
+
 export type AppConfig = {
   revalidate?: number | false
   dynamicParams?: true | false
-  dynamic?: 'auto' | 'error' | 'force-static' | 'force-dynamic'
+  dynamic?: AppConfigDynamic
   fetchCache?: 'force-cache' | 'only-cache'
   preferredRegion?: string
 }

packages/next/src/client/components/static-generation-async-storage.external.ts

@@ -2,6 +2,8 @@ import type { AsyncLocalStorage } from 'async_hooks'
 import type { IncrementalCache } from '../../server/lib/incremental-cache'
 import type { DynamicServerError } from './hooks-server-context'
 import type { FetchMetrics } from '../../server/base-http'
+import type { Revalidate } from '../../server/lib/revalidate'
+
 import { createAsyncLocalStorage } from './async-local-storage'
 
 export interface StaticGenerationStore {
@@ -23,7 +25,7 @@ export interface StaticGenerationStore {
     | 'default-no-store'
     | 'only-no-store'
 
-  revalidate?: false | number
+  revalidate?: Revalidate
   forceStatic?: boolean
   dynamicShouldError?: boolean
   pendingRevalidates?: Record<string, Promise<any>>

packages/next/src/client/components/static-generation-bailout.ts

@@ -1,3 +1,5 @@
+import type { AppConfigDynamic } from '../../build/utils'
+
 import { DynamicServerError } from './hooks-server-context'
 import { maybePostpone } from './maybe-postpone'
 import { staticGenerationAsyncStorage } from './static-generation-async-storage.external'
@@ -6,7 +8,7 @@ class StaticGenBailoutError extends Error {
   code = 'NEXT_STATIC_GEN_BAILOUT'
 }
 
-type BailoutOpts = { dynamic?: string; link?: string }
+type BailoutOpts = { dynamic?: AppConfigDynamic; link?: string }
 
 export type StaticGenerationBailout = (
   reason: string,
@@ -23,7 +25,7 @@ function formatErrorMessage(reason: string, opts?: BailoutOpts) {
 
 export const staticGenerationBailout: StaticGenerationBailout = (
   reason,
-  opts
+  { dynamic, link } = {}
 ) => {
   const staticGenerationStore = staticGenerationAsyncStorage.getStore()
   if (!staticGenerationStore) return false
@@ -34,12 +36,12 @@ export const staticGenerationBailout: StaticGenerationBailout = (
 
   if (staticGenerationStore.dynamicShouldError) {
     throw new StaticGenBailoutError(
-      formatErrorMessage(reason, { ...opts, dynamic: opts?.dynamic ?? 'error' })
+      formatErrorMessage(reason, { link, dynamic: dynamic ?? 'error' })
     )
   }
 
   const message = formatErrorMessage(reason, {
-    ...opts,
+    dynamic,
     // this error should be caught by Next to bail out of static generation
     // in case it's uncaught, this link provides some additional context as to why
     link: 'https://nextjs.org/docs/messages/dynamic-server-error',
@@ -51,7 +53,7 @@ export const staticGenerationBailout: StaticGenerationBailout = (
   // to 0.
   staticGenerationStore.revalidate = 0
 
-  if (!opts?.dynamic) {
+  if (!dynamic) {
     // we can statically prefetch pages that opt into dynamic,
     // but not things like headers/cookies
     staticGenerationStore.staticPrefetchBailout = true

packages/next/src/export/routes/app-page.ts

@@ -25,6 +25,7 @@ import { lazyRenderAppPage } from '../../server/future/route-modules/app-page/mo
 export const enum ExportedAppPageFiles {
   HTML = 'HTML',
   FLIGHT = 'FLIGHT',
+  PREFETCH_FLIGHT = 'PREFETCH_FLIGHT',
   META = 'META',
   POSTPONED = 'POSTPONED',
 }
@@ -128,10 +129,8 @@ export async function exportAppPage(
 
     const html = result.toUnchunkedString()
 
-    const {
-      metadata: { pageData, revalidate = false, postponed, fetchTags },
-    } = result
     const { metadata } = result
+    const { flightData, revalidate = false, postponed, fetchTags } = metadata
 
     // Ensure we don't postpone without having PPR enabled.
     if (postponed && !renderOpts.experimental.ppr) {
@@ -169,23 +168,28 @@ export async function exportAppPage(
 
       return { revalidate: 0 }
     }
+    // If page data isn't available, it means that the page couldn't be rendered
+    // properly.
+    else if (!flightData) {
+      throw new Error(`Invariant: failed to get page data for ${path}`)
+    }
     // If PPR is enabled, we want to emit a prefetch rsc file for the page
     // instead of the standard rsc. This is because the standard rsc will
     // contain the dynamic data.
     else if (renderOpts.experimental.ppr) {
       // If PPR is enabled, we should emit the flight data as the prefetch
       // payload.
       await fileWriter(
-        ExportedAppPageFiles.FLIGHT,
+        ExportedAppPageFiles.PREFETCH_FLIGHT,
         htmlFilepath.replace(/\.html$/, RSC_PREFETCH_SUFFIX),
-        pageData
+        flightData
       )
     } else {
       // Writing the RSC payload to a file if we don't have PPR enabled.
       await fileWriter(
         ExportedAppPageFiles.FLIGHT,
         htmlFilepath.replace(/\.html$/, RSC_SUFFIX),
-        pageData
+        flightData
       )
     }
 

packages/next/src/server/app-render/action-handler.ts

@@ -210,7 +210,8 @@ async function createRedirectRenderResult(
       console.error(`failed to get redirect response`, err)
     }
   }
-  return new RenderResult(JSON.stringify({}))
+
+  return RenderResult.fromStatic('{}')
 }
 
 // Used to compare Host header and Origin header.
@@ -607,7 +608,7 @@ To configure the body size limit for Server Actions, see: https://nextjs.org/doc
       res.statusCode = 303
       return {
         type: 'done',
-        result: new RenderResult(''),
+        result: RenderResult.fromStatic(''),
       }
     } else if (isNotFoundError(err)) {
       res.statusCode = 404