mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
69388a52fe
This PR introduces a build optimization to create a "partial prerender" of the page. 1. During compilation, we create a static shell for the page using your existing Suspense boundaries. Components that can be static will be included in this static shell, leaving holes for the dynamic components. 1. Using `<Suspense />`, we can define fallbacks to be included in the partial prerender, as well as the holes for the dynamic components to stream into. This means Next.js can initially serve a static loading skeleton, kicking off the dynamic parts in parallel. Then, the dynamic components stream in on demand. Dynamic components can use `cookies()`, `headers()`, `'cache': 'no-store'`, or `unstable_noStore()` to opt-into dynamic rendering. Co-authored-by: Zack Tanner <[email protected]>
31 lines
608 B
React
31 lines
608 B
React
import React, { Suspense } from 'react'
|
|
|
|
import { Dynamic } from './dynamic'
|
|
|
|
export function Page({ suspense = false }) {
|
|
let slot = <Dynamic />
|
|
if (suspense) {
|
|
slot = <Suspense fallback={<Dynamic fallback />}>{slot}</Suspense>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h2>Dynamic Component</h2>
|
|
<p>
|
|
This shows the dynamic component based on the existence of the{' '}
|
|
<code>session</code>
|
|
cookie.
|
|
</p>
|
|
<div id="container">{slot}</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function NonSuspensePage() {
|
|
return <Page />
|
|
}
|
|
|
|
export function SuspensePage() {
|
|
return <Page suspense />
|
|
}
|