mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Andrew ClarkandGitHub
dfa7f4f713
If we're reasonably confident that a segment can be prefetched statically without omitting data that would have been included during a runtime prefetch (e.g. cookies), the client should attempt prefetch the segment statically instead of going straight to a runtime request. The decision for whether to do this is based on the ShouldAttemptStaticPrefetch added in previous steps. If it turns out the static response is not sufficient, then it will fall back to a runtime request. This makes prefetching cheaper for pages that are fully statically renderable. We can make the optimization better in the future with more reliable per-segment computation of the ShouldAttemptStaticPrefetch, but the current approach should at least work for fully static pages, which is what's most important. This optimization applies during both the Shell phase and the Speculative phase of the prefetching algorithm.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { Suspense } from 'react'
|
|
|
|
type Params = { slug: string }
|
|
|
|
// A fully static dynamic route: every param value is known via
|
|
// `generateStaticParams` and the page accesses no runtime data, so each URL
|
|
// is prerendered at build time and the route tree prefetch always carries
|
|
// the static-prefetch hint — the Shell phase attempts static per-segment
|
|
// prefetches for any URL of this route.
|
|
//
|
|
// The param-dependent content sits past the shell boundary of each
|
|
// prerender, so the App Shell — everything above it — is identical for every
|
|
// param value and is cached at a param-agnostic key. Prefetching ONE URL of
|
|
// the route therefore populates shell entries that are cache hits for every
|
|
// sibling URL: that cross-param reuse is what the consuming test pins.
|
|
export async function generateStaticParams() {
|
|
return [{ slug: 'one' }, { slug: 'two' }]
|
|
}
|
|
|
|
export default function Page({ params }: { params: Promise<Params> }) {
|
|
return (
|
|
<main>
|
|
<p id="page-content">Dynamic-param page shell text</p>
|
|
<Suspense fallback={<p id="slug-loading">Loading param content...</p>}>
|
|
<SlugContent params={params} />
|
|
</Suspense>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
async function SlugContent({ params }: { params: Promise<Params> }) {
|
|
const { slug } = await params
|
|
return <p id="slug-content">{`Dynamic param content: ${slug}`}</p>
|
|
}
|