Fix empty white page with parallel routes + loading boundaries

[ztanner]

What

When navigating to a page that uses a loading boundary + parallel route, an empty white screen would be displayed rather than the loading state / final state

Why

With parallel routes, the RSC data is an array of data paths, each corresponding with one of the parallel segments rendered on the page.

During the navigation event, when we iterate over this data, we call applyFlightData with this data path & an empty cache node. applyFlightData checks to see if the flight data contains cache nodes ("seed data"). If it doesn't, then that means it has no work to do, and it bails out. Pre-PPR and in the case of having a loading.js file, walkTreeWithFlightRouterState doesn't return any seed data, just router state. This means that applyFlightData will not have any work to do on the new cache node, and leaves it untouched.

Once applyFlightData is finished, but while still in the flight data path loop, we reassign currentCache to the empty cache object we created prior to applyFlightData. But since that cache node has remained empty, the next iteration of the loop is going to be inspecting a now empty cache, rather than the actual "current" cache. Now there's no existing cache to copy into the new cache. The app now doesn't know about any cache nodes.

How

It doesn't seem like we should be re-assigning currentCache to the new cache. In the context of a navigation, it seems more accurate to always assume currentCache is the cache now, since it won't actually be applied to the state until the action has finished (mutable.cache is currently taking care of this).

Closes NEXT-2223
Fixes #61080
Fixes #60682
Fixes #56701

[ztanner]

• canary
  • Fix empty white page with parallel routes + loading boundaries #61597 👈

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite

[ijjk]

Stats from current PR

Default Build

General

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
buildDuration	12s	12.1s	N/A
buildDurationCached	6.1s	5.7s	N/A
nodeModulesSize	196 MB	196 MB	N/A
nextStartRea..uration (ms)	412ms	413ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
423.HASH.js gzip	185 B	181 B	N/A
68-HASH.js gzip	29.6 kB	29.6 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	238 B	240 B	N/A
main-HASH.js gzip	31.9 kB	31.9 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	46.9 kB	46.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	182 B	181 B	N/A
amp-HASH.js gzip	502 B	501 B	N/A
css-HASH.js gzip	320 B	322 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	256 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.2 kB	4.2 kB	N/A
index-HASH.js gzip	257 B	256 B	N/A
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	310 B	311 B	N/A
script-HASH.js gzip	384 B	383 B	N/A
withRouter-HASH.js gzip	306 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	106 B	106 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
_buildManifest.js gzip	483 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
index.html gzip	527 B	527 B	✓
link.html gzip	541 B	539 B	N/A
withRouter.html gzip	523 B	522 B	N/A
Overall change	527 B	527 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
edge-ssr.js gzip	94.4 kB	94.4 kB	N/A
page.js gzip	150 kB	150 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
middleware-b..fest.js gzip	620 B	624 B	N/A
middleware-r..fest.js gzip	151 B	149 B	N/A
middleware.js gzip	47.4 kB	47.4 kB	N/A
edge-runtime..pack.js gzip	1.94 kB	1.94 kB	✓
Overall change	1.94 kB	1.94 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 02-02-Fix_empty_white_page_with_parallel_routes_loading_boundaries	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.4 kB	95.4 kB	✓
app-page-tur..prod.js gzip	97.2 kB	97.2 kB	✓
app-page-tur..prod.js gzip	91.6 kB	91.6 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.2 kB	90.2 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.7 kB	14.7 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.7 kB	14.7 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	49.9 kB	49.9 kB	✓
Overall change	924 kB	924 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for 68-HASH.js

Diff too large to display

Commit: 1605e51

[ijjk]

Tests Passed

[jainmohit2001]

Hi @ztanner. Any updates on this? This is causing bad UX on our website.