mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Andrew ClarkandGitHub
bcb94e3222
It's a common UI pattern for apps to refresh when you click a link to the current page. So when this happens, we refresh the dynamic data in the page segments. Note that this does not apply if the any part of the hash or search query has changed. This might feel a bit weird but it makes more sense when you consider that the way to trigger this behavior is to click the same link multiple times. We should probably refresh the *entire* route when this case occurs, not just the page segments. Essentially treating it the same as a refresh() triggered by an action, which is the more explicit way of modeling the UI pattern described above. Also note that this only refreshes the dynamic data, not static/cached data. If the page segment is fully static and prefetched, the request is skipped. (This is also how refresh() works.)
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import Link from 'next/link'
|
|
import { connection } from 'next/server'
|
|
|
|
export default async function SamePageNav() {
|
|
// Treat the page as dynamic so we can detect when it's refreshed
|
|
await connection()
|
|
|
|
return (
|
|
<>
|
|
<p>
|
|
Demonstrates that when navigating to the exact same URL as the current
|
|
location, we refresh the page segments.
|
|
</p>
|
|
<p>
|
|
Observe that the random number below changes if you click the same link
|
|
multiple times, but not when you switch between links.
|
|
</p>
|
|
<p>
|
|
Random number (changes on each refresh):{' '}
|
|
<span id="random-number">
|
|
{Math.floor(Math.random() * 1_000_000_000)}
|
|
</span>
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<Link href="/same-page-nav">Link to current page</Link>
|
|
</li>
|
|
<li id="hash-b">
|
|
<Link href="/same-page-nav#hash-a">
|
|
Link to current page with hash fragment <code>#hash-a</code>
|
|
</Link>
|
|
</li>
|
|
<li id="hash-a">
|
|
<Link href="/same-page-nav#hash-b">
|
|
Link to current page with hash fragment <code>#hash-b</code>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|