mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Wyatt JohnsonandGitHub
8abbb3dc2e
## What? Rename `experimental.dynamicIO` to `experimental.cacheComponents` across the Next.js codebase. ## Why? We're going to be merging the functionality of the `ppr`, `dynamicIO` and `useCache` experimental flags into the singular `cacheComponents` flag to reduce complexity of the codebase and simplify adoption for users wanting to experiment with experimental features. ## How? - Renamed the configuration option from `experimental.dynamicIO` to `experimental.cacheComponents` - Added deprecation handling with automatic migration for the old option name - Updated all documentation, tests, and internal references - Updated Rust code in SWC transforms and Turbopack - Maintained backward compatibility with deprecation warnings NAR-158
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { Suspense } from 'react'
|
|
import { headers } from 'next/headers'
|
|
|
|
import { getSentinelValue } from '../../getSentinelValue'
|
|
/**
|
|
* This test case is constructed to demonstrate how using the async form of cookies can lead to a better
|
|
* prerender with cache components when PPR is on. There is no difference when PPR is off. When PPR is on the second component
|
|
* can finish rendering before the prerender completes and so we can produce a static shell where the Fallback closest
|
|
* to Cookies access is read
|
|
*/
|
|
export default async function Page() {
|
|
return (
|
|
<Suspense fallback="loading...">
|
|
<Suspense fallback="inner loading...">
|
|
<Component />
|
|
</Suspense>
|
|
<ComponentTwo />
|
|
<div id="page">{getSentinelValue()}</div>
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
async function Component() {
|
|
const hasHeader = (await headers()).has('x-sentinel')
|
|
if (hasHeader) {
|
|
return (
|
|
<div>
|
|
header{' '}
|
|
<span id="x-sentinel">{(await headers()).get('x-sentinel')}</span>
|
|
</div>
|
|
)
|
|
} else {
|
|
return <div>no header found</div>
|
|
}
|
|
}
|
|
|
|
function ComponentTwo() {
|
|
return <p>footer</p>
|
|
}
|