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.
30 lines
1016 B
TypeScript
30 lines
1016 B
TypeScript
import { Suspense } from 'react'
|
|
import { connection } from 'next/server'
|
|
|
|
// A page whose only non-static data source is `connection()`. Unlike cookies
|
|
// or searchParams, `connection()` is *dynamic* data: it hangs during runtime
|
|
// prerenders too, and its hole can only be filled by the navigation-time
|
|
// dynamic request. It is therefore NOT recorded as a runtime-data access:
|
|
// the route tree prefetch carries the static-prefetch hint, and the static
|
|
// per-segment response — although partial — is sufficient (a runtime
|
|
// prefetch would have the exact same hole), so no runtime fallback should
|
|
// fire.
|
|
|
|
async function DynamicContent() {
|
|
await connection()
|
|
return <div id="connection-content">Connection content</div>
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<main>
|
|
<p id="page-content">Connection page shell text</p>
|
|
<Suspense
|
|
fallback={<p id="connection-loading">Loading connection content...</p>}
|
|
>
|
|
<DynamicContent />
|
|
</Suspense>
|
|
</main>
|
|
)
|
|
}
|