mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Andrew ClarkandGitHub
4f523905f0
When processing the prefetch queue, we should prioritize fetching the route trees for all the links before we fetch any of the segments. The reason the route tree is more important is because it tells us the structure of the target page; from this alone, we can determine which segments are already cached and skip them during the navigation. Whereas if the route tree is missing at the time of the navigation, we cannot instruct the server to skip over prefetched segments, because we don't know which ones to skip. To implement this, I added a `phase` property to the PrefetchTask type. This is essentially a secondary priority field that changes as the task progresses. There are two phases: `RouteTree` and `Segments`. Any task in the `RouteTree` phase has higher priority than tasks in the `Segments` phase. Another way to implement this would be to add a secondary queue for segment prefetches. This would require reference counting to clean up segments when there are no more tasks that depend on them. The ref count could also be used as an additional prioritization heuristic: shared layouts with many dependent tasks could be prioritized over segments with fewer. However, I'm not sure the benefits are worth the extra code/complexity, so I'm starting with this simpler approach.
44 lines
1018 B
TypeScript
44 lines
1018 B
TypeScript
import { Suspense } from 'react'
|
|
|
|
type Params = {
|
|
pageNumber: string
|
|
}
|
|
|
|
export async function generateViewport({
|
|
params,
|
|
}: {
|
|
params: Promise<Params>
|
|
}) {
|
|
const { pageNumber } = await params
|
|
return {
|
|
// Put the page number into the media query. This is just a trick to allow
|
|
// the test to detect when the viewport for this page has been prefetched.
|
|
themeColor: [{ media: `(min-width: ${pageNumber}px)`, color: 'light' }],
|
|
}
|
|
}
|
|
|
|
async function Content({ params }: { params: Promise<Params> }) {
|
|
const { pageNumber } = await params
|
|
return 'Content of page ' + pageNumber
|
|
}
|
|
|
|
export default async function LinkCancellationTargetPage({
|
|
params,
|
|
}: {
|
|
params: Promise<Params>
|
|
}) {
|
|
return (
|
|
<Suspense fallback="Loading...">
|
|
<Content params={params} />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
export async function generateStaticParams(): Promise<Array<Params>> {
|
|
const result: Array<Params> = []
|
|
for (let n = 1; n <= 10; n++) {
|
|
result.push({ pageNumber: n.toString() })
|
|
}
|
|
return result
|
|
}
|