mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
e9c4f4289d
When navigating to a route that wasn't previously prefetched (e.g. via a
Link with prefetch={false}, or router.push()), the client stores the
route data from the server response in the cache so it can be reused by
future navigations and prefetches to the same URL.
These entries were being stored with a null "nextUrl" cache key, but
lookups use the real nextUrl from router state, so every subsequent
lookup missed. This caused redundant requests for route data the client
already had.
The fix threads the nextUrl through the route discovery path so it
reaches the cache write with the correct value. For non-intercepted
routes the entry is keyed with a wildcard (reusable regardless of
nextUrl); for intercepted routes it uses the specific nextUrl, since the
route structure varies by referrer.
Also cleans up how interception routes interact with the optimistic
route matching system: patterns are now always stored during discovery
(previously they were skipped), and the interception bailout happens in
a single place during matching rather than being duplicated across
multiple check sites.
Closes #88863
Co-authored-by: Hendrik Liebau <[email protected]>
Co-authored-by: Hamidreza Hanafi <[email protected]>
---------
Co-authored-by: Hendrik Liebau <[email protected]>
Co-authored-by: Hamidreza Hanafi <[email protected]>
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { connection } from 'next/server'
|
|
import { Suspense } from 'react'
|
|
import Link from 'next/link'
|
|
|
|
async function PhotoContent({ params }: { params: Promise<{ id: string }> }) {
|
|
// connection() opts this page into dynamic rendering. This is important
|
|
// because the test uses staleTimes.dynamic to control when cache entries
|
|
// expire. Without dynamic rendering, the page would use the static stale
|
|
// time (which is long by default and would mask the bug).
|
|
await connection()
|
|
const { id } = await params
|
|
return <div id="photo-page">Photo {id}</div>
|
|
}
|
|
|
|
export default function PhotoPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>
|
|
}) {
|
|
return (
|
|
<div>
|
|
<Suspense fallback={<div>Loading photo...</div>}>
|
|
<PhotoContent params={params} />
|
|
</Suspense>
|
|
|
|
<h2>Step 2: Navigate back</h2>
|
|
<p style={{ color: '#666', fontSize: 14 }}>
|
|
Click this link to go back to the feed page. The route and segment data
|
|
from this page remain in the client cache.
|
|
</p>
|
|
<p>
|
|
<Link href="/feed" prefetch={false} id="link-back-to-feed">
|
|
Back to feed
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|