fix router prefetch cache key to work with route interception

[ztanner]

What?

When handling route interception in two different segments but handled by the same interception route, the first interception will show the correct component but attempting the same interception on another segment will return elements from the first request, not the second.

Why?

Prefetch cache entries are created from the browser URL. However, route interception makes use of nextUrl to mask the underlying components that are being fetched from the server to handle the request

Consider the following scenario:

app
   foo
     @modal
       (...)post
         [id]
   bar
     @modal
       (...post)
         [id]
   post
     [id]
     

If you trigger an interception on /foo, your URL is going to be masked to /post/1 and keyed as such in the prefetch cache. However, the cache entry is actually associated with app/foo/@modal/(...post)/[id]. That means when you trigger the same interception on /bar, it will return the tree from /foo.

How?

This PR will prefix the prefetch cache key with state.nextUrl when necessary.

Fixes #49878
Fixes #52748
Closes NEXT-1818

[ztanner]

Current dependencies on/for this PR:

• canary
  • PR fix router prefetch cache key to work with route interception #59861 👈

This stack of pull requests is managed by Graphite.

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
buildDuration	12.7s	12.7s	N/A
buildDurationCached	7.1s	6.1s	N/A
nodeModulesSize	202 MB	202 MB	⚠️ +9.54 kB
nextStartRea..uration (ms)	423ms	426ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
193.HASH.js gzip	181 B	182 B	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
433-HASH.js gzip	28.2 kB	28.4 kB	⚠️ +120 B
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	239 B	242 B	N/A
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	127 kB	127 kB	⚠️ +120 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	183 B	181 B	N/A
amp-HASH.js gzip	504 B	502 B	N/A
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	253 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	✓
routerDirect..HASH.js gzip	312 B	311 B	N/A
script-HASH.js gzip	385 B	383 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.4 kB	3.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	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 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
index.html gzip	529 B	526 B	N/A
link.html gzip	541 B	539 B	N/A
withRouter.html gzip	525 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
edge-ssr.js gzip	93.7 kB	93.7 kB	N/A
page.js gzip	147 kB	147 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
middleware-b..fest.js gzip	625 B	625 B	✓
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.4 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.7 kB	2.7 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 12-21-fix_router_prefetch_cache_key_to_work_with_route_interception	Change
app-page-exp...dev.js gzip	168 kB	168 kB	✓
app-page-exp..prod.js gzip	94.2 kB	94.2 kB	✓
app-page-tur..prod.js gzip	94.9 kB	94.9 kB	✓
app-page-tur..prod.js gzip	89.4 kB	89.4 kB	✓
app-page.run...dev.js gzip	138 kB	138 kB	✓
app-page.run..prod.js gzip	88.7 kB	88.7 kB	✓
app-route-ex...dev.js gzip	24.1 kB	24.1 kB	✓
app-route-ex..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.3 kB	16.3 kB	✓
app-route.ru...dev.js gzip	23.5 kB	23.5 kB	✓
app-route.ru..prod.js gzip	16.3 kB	16.3 kB	✓
pages-api-tu..prod.js gzip	9.37 kB	9.37 kB	✓
pages-api.ru...dev.js gzip	9.64 kB	9.64 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.5 kB	22.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	932 kB	932 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Commit: d7e0ab7

[AkifumiSato]

The same is true for this issue.
#52748

[kachkaev]

👋 @ztanner! Would this PR close #53170 too? Just curious if it has the same underlying cause or there’s something else going on there.