Fix instant loading states after invalidating prefetch cache

[ztanner]

In #61573, I updated the navigation reducer to request a new prefetch entry if it's stale. But this has the unintended consequence of making instant loading states effectively useless after 30s (when the prefetch would have expired). Blocking navigation and then rendering the loading state isn't ideal - if we have some loading data in a cache node, we should re-use it.

Now that #62346 stores loading data in the CacheNode, we can copy over loading during a navigation.

This PR repurposes fillCacheWithDataProperty which wasn't being used anywhere, to instead be a utility we can use to programmatically trigger a lazy fetch on a particular segment path by nulling out it's data while copying over other properties. We could have used the existing util as-is, but ideally we only have a single spot where lazy fetching can happen, which currently is in LayoutRouter.

When a stale prefetch entry is detected, rather than applying the data to the tree, this PR will copy over the loading nodes and will "delete" the data so it can be refetched.

Closes NEXT-2806

[ztanner]

• add experimental client router cache config #62856
• Fix instant loading states after invalidating prefetch cache #63256 👈
• Store loading data in CacheNode #62346 : 1 other dependent PR (#62347 )
• Pass whole prefetch entry rather than status property #62345
• canary

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

Join @ztanner and the rest of your teammates on Graphite

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
buildDuration	14.4s	14.5s	⚠️ +101ms
buildDurationCached	8s	6.6s	N/A
nodeModulesSize	198 MB	198 MB	⚠️ +15.7 kB
nextStartRea..uration (ms)	448ms	439ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
2453-HASH.js gzip	30.5 kB	30.7 kB	⚠️ +210 B
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.04 kB	5.04 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	243 B	242 B	N/A
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	75.9 kB	76.1 kB	⚠️ +210 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.21 kB	4.21 kB	✓
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	6.57 kB	6.57 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
_buildManifest.js gzip	481 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
index.html gzip	529 B	529 B	✓
link.html gzip	541 B	542 B	N/A
withRouter.html gzip	524 B	523 B	N/A
Overall change	529 B	529 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
edge-ssr.js gzip	95.2 kB	95.2 kB	N/A
page.js gzip	3.04 kB	3.04 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
middleware-b..fest.js gzip	625 B	624 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	990 B	990 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	96.6 kB	96.6 kB	✓
app-page-tur..prod.js gzip	98.3 kB	98.3 kB	✓
app-page-tur..prod.js gzip	92.8 kB	92.8 kB	✓
app-page.run...dev.js gzip	149 kB	149 kB	✓
app-page.run..prod.js gzip	91.3 kB	91.3 kB	✓
app-route-ex...dev.js gzip	21.3 kB	21.3 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	21 kB	21 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.52 kB	9.52 kB	✓
pages-api.ru...dev.js gzip	9.8 kB	9.8 kB	✓
pages-api.ru..prod.js gzip	9.52 kB	9.52 kB	✓
pages-turbo...prod.js gzip	22.3 kB	22.3 kB	✓
pages.runtim...dev.js gzip	22.9 kB	22.9 kB	✓
pages.runtim..prod.js gzip	22.3 kB	22.3 kB	✓
server.runti..prod.js gzip	50.6 kB	50.6 kB	✓
Overall change	948 kB	948 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 03-13-Fix_instant_loading_states	Change
0.pack gzip	1.56 MB	1.56 MB	⚠️ +4.69 kB
index.pack gzip	106 kB	105 kB	N/A
Overall change	1.56 MB	1.56 MB	⚠️ +4.69 kB

Diff details

Diff for middleware.js

Diff too large to display

Diff for 2453-HASH.js

Diff too large to display

Commit: be44437