Skip to content

Commit

Permalink
Generate per-segment prefetch responses
Browse files Browse the repository at this point in the history
Follow up to #71113.

This generates a prefetch response for route segments, so the client
can request them individually, and reuse shared layouts between
separate page prefetches.

Since this is exclusive to PPR, segment prefetches are always static
and do not reach the application layer. They are served directly from
cache. (This part was implemented in the previous PR.)

The prerendered segment data is generated (and revalidated)
simultaneously with the prerender of the entire page, to ensure
consistency between parent and child segments. Since we always rebuild
the whole page, we can save an extra render of each segment by reusing
the Flight response that was used to generate the initial HTML.

We do this by decoding the page data using a server-side Flight
consumer, picking out an individual segment's data, then re-encoding it
as its own Flight response. We have to do this once per segment — not
ideal, but for now it's the only way to make sure the side effects from
the original Flight stream (e.g. Float preloads) are transferred to the
per-segment streams.

This PR does not yet include any updates to the client router.
  • Loading branch information
acdlite committed Nov 1, 2024
1 parent e97e1f0 commit 938c68c
Show file tree
Hide file tree
Showing 4 changed files with 359 additions and 37 deletions.
138 changes: 106 additions & 32 deletions packages/next/src/server/app-render/app-render.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ import type { RequestStore } from '../app-render/work-unit-async-storage.externa
import type { NextParsedUrlQuery } from '../request-meta'
import type { LoaderTree } from '../lib/app-dir-module'
import type { AppPageModule } from '../route-modules/app-page/module'
import type { ClientReferenceManifest } from '../../build/webpack/plugins/flight-manifest-plugin'
import type {
ClientReferenceManifest,
ManifestNode,
} from '../../build/webpack/plugins/flight-manifest-plugin'
import type { DeepReadonly } from '../../shared/lib/deep-readonly'
import type { BaseNextRequest, BaseNextResponse } from '../base-http'
import type { IncomingHttpHeaders } from 'http'
Expand Down Expand Up @@ -89,7 +92,10 @@ import { makeGetServerInsertedHTML } from './make-get-server-inserted-html'
import { walkTreeWithFlightRouterState } from './walk-tree-with-flight-router-state'
import { createComponentTree } from './create-component-tree'
import { getAssetQueryString } from './get-asset-query-string'
import { setReferenceManifestsSingleton } from './encryption-utils'
import {
setReferenceManifestsSingleton,
getServerModuleMap,
} from './encryption-utils'
import {
DynamicState,
type PostponedState,
Expand Down Expand Up @@ -1250,32 +1256,6 @@ async function renderToHTMLOrFlightImpl(
}
}

// Per-segment prefetch data
//
// All of the segments for a page are generated simultaneously, including
// during revalidations. This is to ensure consistency, because it's
// possible for a mismatch between a layout and page segment can cause the
// client to error during rendering. We want to preserve the ability of the
// client to recover from such a mismatch by re-requesting all the segments
// to get a consistent view of the page.
//
// TODO (Per Segment Prefetching): This is placeholder data. Populate with
// the actual data generated during prerender.
if (renderOpts.experimental.isRoutePPREnabled === true) {
const placeholder = Buffer.from(
'TODO (Per Segment Prefetching): Not yet implemented\n'
)
metadata.segmentFlightData = new Map([
// Root segment
['/', placeholder],
['/blog', placeholder],
// TODO: Update the client to use the same encoding for segment paths that
// we use here, so we don't have to convert between them. Needs to be
// filesystem safe.
['/blog/[post]-1-d', placeholder],
])
}

return new RenderResult(await streamToString(response.stream), options)
} else {
// We're rendering dynamically
Expand Down Expand Up @@ -2758,7 +2738,14 @@ async function prerenderToStream(
tracingMetadata: tracingMetadata,
})

metadata.flightData = await streamToBuffer(reactServerResult.asStream())
const flightData = await streamToBuffer(reactServerResult.asStream())
metadata.flightData = flightData
metadata.segmentFlightData = await collectSegmentData(
finalAttemptRSCPayload,
flightData,
ComponentMod,
renderOpts
)

if (serverIsDynamic || clientIsDynamic) {
if (postponed != null) {
Expand Down Expand Up @@ -3209,9 +3196,16 @@ async function prerenderToStream(
// const reactServerResult =
// await createReactServerPrerenderResultFromRender(reactServerStream!)

metadata.flightData = await streamToBuffer(
const flightData = await streamToBuffer(
serverPrerenderStreamResult.asStream()
)
metadata.flightData = flightData
metadata.segmentFlightData = await collectSegmentData(
finalServerPayload,
flightData,
ComponentMod,
renderOpts
)

const getServerInsertedHTML = makeGetServerInsertedHTML({
polyfills,
Expand Down Expand Up @@ -3334,6 +3328,12 @@ async function prerenderToStream(

if (shouldGenerateStaticFlightData(workStore)) {
metadata.flightData = flightData
metadata.segmentFlightData = await collectSegmentData(
RSCPayload,
flightData,
ComponentMod,
renderOpts
)
}

/**
Expand Down Expand Up @@ -3513,7 +3513,14 @@ async function prerenderToStream(
)

if (shouldGenerateStaticFlightData(workStore)) {
metadata.flightData = await streamToBuffer(reactServerResult.asStream())
const flightData = await streamToBuffer(reactServerResult.asStream())
metadata.flightData = flightData
metadata.segmentFlightData = await collectSegmentData(
RSCPayload,
flightData,
ComponentMod,
renderOpts
)
}

const getServerInsertedHTML = makeGetServerInsertedHTML({
Expand Down Expand Up @@ -3665,9 +3672,16 @@ async function prerenderToStream(
})

if (shouldGenerateStaticFlightData(workStore)) {
metadata.flightData = await streamToBuffer(
const flightData = await streamToBuffer(
reactServerPrerenderResult.asStream()
)
metadata.flightData = flightData
metadata.segmentFlightData = await collectSegmentData(
errorRSCPayload,
flightData,
ComponentMod,
renderOpts
)
}

const validateRootLayout = renderOpts.dev
Expand Down Expand Up @@ -3794,3 +3808,63 @@ const getGlobalErrorStyles = async (

return globalErrorStyles
}

async function collectSegmentData(
rscPayload: InitialRSCPayload,
fullPageDataBuffer: Buffer,
ComponentMod: AppPageModule,
renderOpts: RenderOpts
): Promise<Map<string, Buffer> | undefined> {
// Per-segment prefetch data
//
// All of the segments for a page are generated simultaneously, including
// during revalidations. This is to ensure consistency, because it's
// possible for a mismatch between a layout and page segment can cause the
// client to error during rendering. We want to preserve the ability of the
// client to recover from such a mismatch by re-requesting all the segments
// to get a consistent view of the page.
//
// For performance, we reuse the Flight output that was created when
// generating the initial page HTML. The Flight stream for the whole page is
// decomposed into a separate stream per segment.

const clientReferenceManifest = renderOpts.clientReferenceManifest
if (
!clientReferenceManifest ||
renderOpts.experimental.isRoutePPREnabled !== true
) {
return
}

// FlightDataPath is an unsound type, hence the additional checks.
const flightDataPaths = rscPayload.f
if (flightDataPaths.length !== 1 && flightDataPaths[0].length !== 3) {
console.error(
'Internal Next.js error: InitialRSCPayload does not match the expected ' +
'shape for a prerendered page during segment prefetch generation.'
)
return
}
const routeTree: FlightRouterState = flightDataPaths[0][0]

// Manifest passed to the Flight client for reading the full-page Flight
// stream. Based off similar code in use-cache-wrapper.ts.
const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'
const serverConsumerManifest = {
// moduleLoading must be null because we don't want to trigger preloads of ClientReferences
// to be added to the consumer. Instead, we'll wait for any ClientReference to be emitted
// which themselves will handle the preloading.
moduleLoading: null,
moduleMap: isEdgeRuntime
? clientReferenceManifest.edgeRscModuleMapping
: clientReferenceManifest.rscModuleMapping,
serverModuleMap: getServerModuleMap(),
}

return await ComponentMod.collectSegmentData(
routeTree,
fullPageDataBuffer,
clientReferenceManifest.clientModules as ManifestNode,
serverConsumerManifest
)
}
Loading

0 comments on commit 938c68c

Please sign in to comment.