Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix PPR navigations & revert layerAssets property from FlightData #67435

Merged
merged 3 commits into from
Jul 9, 2024
Merged

Fix PPR navigations & revert layerAssets property from FlightData #67435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65618a1
Revert "add layerAssets property to FlightDataPath (#66354)"
ztanner Jul 3, 2024
5c7a0ca
add PPR prefetch test
ztanner Jul 4, 2024
1c54500
move layerAssets into CacheNodeSeedData (#67436)
ztanner Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions packages/next/src/client/components/app-router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ type AppRouterProps = Omit<
> & {
buildId: string
initialHead: ReactNode
initialLayerAssets: ReactNode
assetPrefix: string
missingSlots: Set<string>
}
Expand Down Expand Up @@ -153,8 +152,6 @@ export function createEmptyCacheNode(): CacheNode {
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand Down Expand Up @@ -261,7 +258,6 @@ function Head({
function Router({
buildId,
initialHead,
initialLayerAssets,
initialTree,
initialCanonicalUrl,
initialSeedData,
Expand All @@ -279,7 +275,6 @@ function Router({
initialParallelRoutes,
location: !isServer ? window.location : null,
initialHead,
initialLayerAssets,
couldBeIntercepted,
}),
[
Expand All @@ -288,7 +283,6 @@ function Router({
initialCanonicalUrl,
initialTree,
initialHead,
initialLayerAssets,
couldBeIntercepted,
]
)
Expand Down Expand Up @@ -637,27 +631,9 @@ function Router({
head = null
}

// We use `useDeferredValue` to handle switching between the prefetched and
// final values. The second argument is returned on initial render, then it
// re-renders with the first argument. We only use the prefetched layer assets
// if they are available. Otherwise, we use the non-prefetched version.
const resolvedPrefetchLayerAssets =
cache.prefetchLayerAssets !== null
? cache.prefetchLayerAssets
: cache.layerAssets

const layerAssets = useDeferredValue(
cache.layerAssets,
// @ts-expect-error The second argument to `useDeferredValue` is only
// available in the experimental builds. When its disabled, it will always
// return `cache.layerAssets`.
resolvedPrefetchLayerAssets
)

let content = (
<RedirectBoundary>
{head}
{layerAssets}
{cache.rsc}
<AppRouterAnnouncer tree={tree} />
</RedirectBoundary>
Expand Down
23 changes: 0 additions & 23 deletions packages/next/src/client/components/layout-router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,8 +350,6 @@ function InnerLayoutRouter({
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand Down Expand Up @@ -427,23 +425,6 @@ function InnerLayoutRouter({
use(unresolvedThenable) as never
}

// We use `useDeferredValue` to handle switching between the prefetched and
// final values. The second argument is returned on initial render, then it
// re-renders with the first argument. We only use the prefetched layer assets
// if they are available. Otherwise, we use the non-prefetched version.
const resolvedPrefetchLayerAssets =
childNode.prefetchLayerAssets !== null
? childNode.prefetchLayerAssets
: childNode.layerAssets

const layerAssets = useDeferredValue(
childNode.layerAssets,
// @ts-expect-error The second argument to `useDeferredValue` is only
// available in the experimental builds. When its disabled, it will always
// return `cache.layerAssets`.
resolvedPrefetchLayerAssets
)

// If we get to this point, then we know we have something we can render.
const subtree = (
// The layout router context narrows down tree and childNodes at each level.
Expand All @@ -456,7 +437,6 @@ function InnerLayoutRouter({
loading: childNode.loading,
}}
>
{layerAssets}
{resolvedRsc}
</LayoutRouterContext.Provider>
)
Expand Down Expand Up @@ -517,7 +497,6 @@ export default function OuterLayoutRouter({
template,
notFound,
notFoundStyles,
styles,
}: {
parallelRouterKey: string
segmentPath: FlightSegmentPath
Expand All @@ -529,7 +508,6 @@ export default function OuterLayoutRouter({
template: React.ReactNode
notFound: React.ReactNode | undefined
notFoundStyles: React.ReactNode | undefined
styles?: React.ReactNode
}) {
const context = useContext(LayoutRouterContext)
if (!context) {
Expand Down Expand Up @@ -562,7 +540,6 @@ export default function OuterLayoutRouter({

return (
<>
{styles}
{preservedSegments.map((preservedSegment) => {
const preservedSegmentValue = getSegmentValue(preservedSegment)
const cacheKey = createRouterCacheKey(preservedSegment)
Expand Down
6 changes: 2 additions & 4 deletions packages/next/src/client/components/router-reducer/apply-flight-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,14 @@ export function applyFlightData(
prefetchEntry?: PrefetchCacheEntry
): boolean {
// The one before last item is the router state tree patch
const [treePatch, cacheNodeSeedData, head, layerAssets] =
flightDataPath.slice(-4)
const [treePatch, cacheNodeSeedData, head] = flightDataPath.slice(-3)

// Handles case where prefetch only returns the router tree patch without rendered components.
if (cacheNodeSeedData === null) {
return false
}

if (flightDataPath.length === 4) {
if (flightDataPath.length === 3) {
const rsc = cacheNodeSeedData[2]
const loading = cacheNodeSeedData[3]
cache.loading = loading
Expand All @@ -36,7 +35,6 @@ export function applyFlightData(
treePatch,
cacheNodeSeedData,
head,
layerAssets,
prefetchEntry
)
} else {
Expand Down
16 changes: 0 additions & 16 deletions ...next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ describe('clearCacheNodeDataForSegmentPath', () => {
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand All @@ -28,8 +26,6 @@ describe('clearCacheNodeDataForSegmentPath', () => {
rsc: <>Root layout</>,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
loading: null,
parallelRoutes: new Map([
Expand All @@ -43,8 +39,6 @@ describe('clearCacheNodeDataForSegmentPath', () => {
rsc: <>Linking</>,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
loading: null,
parallelRoutes: new Map([
Expand All @@ -58,8 +52,6 @@ describe('clearCacheNodeDataForSegmentPath', () => {
rsc: <>Page</>,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand All @@ -80,26 +72,22 @@ describe('clearCacheNodeDataForSegmentPath', () => {
expect(cache).toMatchInlineSnapshot(`
{
"head": null,
"layerAssets": null,
"lazyData": null,
"loading": null,
"parallelRoutes": Map {
"children" => Map {
"linking" => {
"head": null,
"layerAssets": null,
"lazyData": null,
"loading": null,
"parallelRoutes": Map {
"children" => Map {
"" => {
"head": null,
"layerAssets": null,
"lazyData": null,
"loading": null,
"parallelRoutes": Map {},
"prefetchHead": null,
"prefetchLayerAssets": null,
"prefetchRsc": null,
"rsc": <React.Fragment>
Page
Expand All @@ -108,27 +96,23 @@ describe('clearCacheNodeDataForSegmentPath', () => {
},
},
"prefetchHead": null,
"prefetchLayerAssets": null,
"prefetchRsc": null,
"rsc": <React.Fragment>
Linking
</React.Fragment>,
},
"dashboard" => {
"head": null,
"layerAssets": null,
"lazyData": null,
"loading": null,
"parallelRoutes": Map {},
"prefetchHead": null,
"prefetchLayerAssets": null,
"prefetchRsc": null,
"rsc": null,
},
},
},
"prefetchHead": null,
"prefetchLayerAssets": null,
"prefetchRsc": null,
"rsc": null,
}
Expand Down
6 changes: 0 additions & 6 deletions packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ export function clearCacheNodeDataForSegmentPath(
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand All @@ -58,8 +56,6 @@ export function clearCacheNodeDataForSegmentPath(
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
parallelRoutes: new Map(),
loading: null,
Expand All @@ -74,8 +70,6 @@ export function clearCacheNodeDataForSegmentPath(
rsc: childCacheNode.rsc,
prefetchRsc: childCacheNode.prefetchRsc,
head: childCacheNode.head,
layerAssets: childCacheNode.layerAssets,
prefetchLayerAssets: childCacheNode.prefetchLayerAssets,
prefetchHead: childCacheNode.prefetchHead,
parallelRoutes: new Map(childCacheNode.parallelRoutes),
loading: childCacheNode.loading,
Expand Down
8 changes: 0 additions & 8 deletions packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ describe('createInitialRouterState', () => {
initialParallelRoutes,
location: new URL('/linking', 'https://localhost') as any,
initialHead: <title>Test</title>,
initialLayerAssets: null,
couldBeIntercepted: false,
})

Expand All @@ -53,16 +52,13 @@ describe('createInitialRouterState', () => {
initialParallelRoutes,
location: new URL('/linking', 'https://localhost') as any,
initialHead: <title>Test</title>,
initialLayerAssets: null,
})

const expectedCache: CacheNode = {
lazyData: null,
rsc: children,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
loading: null,
parallelRoutes: new Map([
Expand All @@ -85,8 +81,6 @@ describe('createInitialRouterState', () => {
parallelRoutes: new Map(),
loading: null,
head: <title>Test</title>,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
},
],
Expand All @@ -97,8 +91,6 @@ describe('createInitialRouterState', () => {
rsc: null,
prefetchRsc: null,
head: null,
layerAssets: null,
prefetchLayerAssets: null,
prefetchHead: null,
loading: null,
},
Expand Down
11 changes: 2 additions & 9 deletions packages/next/src/client/components/router-reducer/create-initial-router-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export interface InitialRouterStateParameters {
initialParallelRoutes: CacheNode['parallelRoutes']
location: Location | null
initialHead: ReactNode
initialLayerAssets: ReactNode
couldBeIntercepted?: boolean
}

Expand All @@ -33,7 +32,6 @@ export function createInitialRouterState({
initialParallelRoutes,
location,
initialHead,
initialLayerAssets,
couldBeIntercepted,
}: InitialRouterStateParameters) {
const isServer = !location
Expand All @@ -44,8 +42,6 @@ export function createInitialRouterState({
rsc: rsc,
prefetchRsc: null,
head: null,
layerAssets: initialLayerAssets,
prefetchLayerAssets: null,
prefetchHead: null,
// The cache gets seeded during the first render. `initialParallelRoutes` ensures the cache from the first render is there during the second render.
parallelRoutes: isServer ? new Map() : initialParallelRoutes,
Expand All @@ -71,8 +67,7 @@ export function createInitialRouterState({
undefined,
initialTree,
initialSeedData,
initialHead,
initialLayerAssets
initialHead
)
}

Expand Down Expand Up @@ -110,9 +105,7 @@ export function createInitialRouterState({
location.origin
)

const initialFlightData: FlightData = [
['', initialTree, null, null, initialLayerAssets],
]
const initialFlightData: FlightData = [['', initialTree, null, null]]
createPrefetchCacheEntryForInitialLoad({
url,
kind: PrefetchKind.AUTO,
Expand Down
Loading
Loading