mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Andrew ClarkandGitHub
d3de9bce9b
This change adds infrastructure for a planned client-side optimization where the router can infer route structure from previously prefetched routes, avoiding redundant route tree requests. When the client prefetches /blog/post-1 and learns the route structure is /blog/[slug], it could potentially reuse that knowledge for /blog/post-2 without another server roundtrip. However, if a static route like /blog/featured exists at the same level, the client needs to know NOT to apply the dynamic template for that URL. staticSiblings provides this information. When a dynamic segment like [slug] has static siblings (e.g., "featured", "archive"), the server includes them in the prefetch response. The client can then check whether an incoming URL matches a known static sibling, and if so, recognize that the previously learned route structure does not apply.
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import Link from 'next/link'
|
|
import { LinkAccordion } from '../components/link-accordion'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<main id="home-page">
|
|
<h1>Static Siblings Test</h1>
|
|
|
|
<section>
|
|
<h2>About</h2>
|
|
<p>
|
|
This test verifies that when a dynamic route has static siblings at
|
|
the same URL level, the client can correctly navigate to the static
|
|
sibling even after the dynamic route has been visited/prefetched.
|
|
</p>
|
|
<h3>Manual testing instructions</h3>
|
|
<ol>
|
|
<li>Click the checkbox next to a dynamic route to reveal it</li>
|
|
<li>Click the revealed link to navigate to the dynamic route</li>
|
|
<li>Use the browser back button to return to this page</li>
|
|
<li>Click the static sibling link (which has prefetch=false)</li>
|
|
<li>Verify the static sibling page renders, not the dynamic route</li>
|
|
</ol>
|
|
<p>
|
|
The key behavior being tested: when navigating to a URL that matches
|
|
both a dynamic route (e.g., /products/[id]) and a static route (e.g.,
|
|
/products/sale), the static route should take precedence. The route
|
|
tree delivered by the server includes information about static
|
|
siblings to facilitate this behavior.
|
|
</p>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="cross-route-group-test">
|
|
<h2>Cross-Route-Group Siblings</h2>
|
|
<p>/products/sale vs /products/[id] (in different route groups)</p>
|
|
<div>
|
|
<LinkAccordion href="/products/123">
|
|
Dynamic route: /products/123
|
|
</LinkAccordion>
|
|
</div>
|
|
<div>
|
|
<Link href="/products/sale" prefetch={false} id="link-to-sale">
|
|
Static sibling: /products/sale
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="same-directory-test">
|
|
<h2>Same-Directory Siblings</h2>
|
|
<p>/items/featured vs /items/[id] (in the same directory)</p>
|
|
<div>
|
|
<LinkAccordion href="/items/456">
|
|
Dynamic route: /items/456
|
|
</LinkAccordion>
|
|
</div>
|
|
<div>
|
|
<Link href="/items/featured" prefetch={false} id="link-to-featured">
|
|
Static sibling: /items/featured
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="parallel-route-test">
|
|
<h2>Parallel Route Siblings</h2>
|
|
<p>/dashboard/settings vs /dashboard/[id] (in @panel parallel route)</p>
|
|
<div>
|
|
<LinkAccordion href="/dashboard/789">
|
|
Dynamic route: /dashboard/789
|
|
</LinkAccordion>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
href="/dashboard/settings"
|
|
prefetch={false}
|
|
id="link-to-settings"
|
|
>
|
|
Static sibling: /dashboard/settings
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="deeply-nested-test">
|
|
<h2>Deeply Nested Static Siblings</h2>
|
|
<p>
|
|
/categories/electronics/computers/laptops vs /categories/[slug]
|
|
(static sibling with multiple layouts along its path)
|
|
</p>
|
|
<div>
|
|
<LinkAccordion href="/categories/phones">
|
|
Dynamic route: /categories/phones
|
|
</LinkAccordion>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
href="/categories/electronics/computers/laptops"
|
|
prefetch={false}
|
|
id="link-to-laptops"
|
|
>
|
|
Static sibling: /categories/electronics/computers/laptops
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|