mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Zack TannerandGitHub
5e282808c0
`prefetch={true}` with `cacheComponents` was opting into runtime
prefetching, with `unstable_forceStale` preserving the old behavior of
fetching the full (stale) data. However we only intended to expose
runtime prefetching via the `export const prefetch` segment config.
This removes `unstable_forceStale` and restores previous
`prefetch={true}` behavior. I've disabled some of the tests that were
relying on the old link behavior for opting into runtime prefetching -
we'll need to refactor those to use the segment opt-in or just remove
them all together.
Fixes #85162
Closes NAR-320
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { LinkAccordion } from '../../components/link-accordion'
|
|
|
|
export default function RefetchOnNewBaseTreeLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<>
|
|
<div style={{ backgroundColor: 'lightgray', padding: '1rem' }}>
|
|
<p>
|
|
This demonstrates what happens when a link is prefetched using{' '}
|
|
<code>{'prefetch={true}'}</code> and the URL changes. Next.js should
|
|
re-prefetch the link in case the delta between the base tree and the
|
|
target tree has changed.
|
|
</p>
|
|
<p>
|
|
Everything in this gray section is part of a shared layout. The links
|
|
below are prefetched using <code>{'prefetch={true}'}</code>. If the
|
|
first loaded page is "/refetch-on-new-base-tree/a", the prefetch for
|
|
this link will be empty, because there's no delta between the base
|
|
tree and the target tree.
|
|
</p>
|
|
<p>
|
|
However, if you then navigate to page B, we should re-prefetch the
|
|
link to A, because the delta between the base tree and the target tree
|
|
is now different.
|
|
</p>
|
|
<p>Test steps:</p>
|
|
<ul>
|
|
<li>Load "/refetch-on-new-base-tree/a" in the browser.</li>
|
|
<li>
|
|
Click the checkboxes to reveal the links. (These exist so the e2e
|
|
test can control the timing of the prefetch.)
|
|
</li>
|
|
<li>
|
|
Observe that the prefetch for page A is empty, i.e. the string "Page
|
|
A content" should not appear anywhere in the response.
|
|
</li>
|
|
<li>Click the link to page B to navigate away.</li>
|
|
<li>
|
|
Check the network tab to confirm that a new prefetch for page A was
|
|
requested.
|
|
</li>
|
|
<li>Click the link to page A</li>
|
|
<li>
|
|
Observe that no new request was made when navigating to page A,
|
|
because it was fully prefetched.
|
|
</li>
|
|
</ul>
|
|
<LinkAccordion prefetch={true} href="/refetch-on-new-base-tree/a">
|
|
Page A
|
|
</LinkAccordion>
|
|
<LinkAccordion prefetch={true} href="/refetch-on-new-base-tree/b">
|
|
Page B
|
|
</LinkAccordion>
|
|
</div>
|
|
<div>{children}</div>
|
|
</>
|
|
)
|
|
}
|