mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
2ed06f03e8
Tweaks the environment label logic to only use label things as `Prefetch` if there's a runtime prefetch config. If there's none, we label it as `Prefetchable` instead. --------- Co-authored-by: Josh Story <[email protected]>
104 lines
2.2 KiB
TypeScript
104 lines
2.2 KiB
TypeScript
export async function fetchCachedRandom(cacheKey: string) {
|
|
return fetchCached(
|
|
`https://next-data-api-endpoint.vercel.app/api/random?key=${encodeURIComponent('cached-' + cacheKey)}`
|
|
)
|
|
}
|
|
|
|
export async function fetchCached(url: string) {
|
|
const response = await fetch(url, { cache: 'force-cache' })
|
|
return response.text()
|
|
}
|
|
|
|
export async function getCachedData(_key: string) {
|
|
'use cache'
|
|
await new Promise((r) => setTimeout(r))
|
|
return Math.random()
|
|
}
|
|
|
|
export async function CachedData({
|
|
label,
|
|
cacheKey,
|
|
}: {
|
|
label: string
|
|
cacheKey: string
|
|
}) {
|
|
const data = await getCachedData(cacheKey)
|
|
console.log(`after cache read - ${label}`)
|
|
return (
|
|
<dl>
|
|
<dt>Cached Data</dt>
|
|
<dd>{data}</dd>
|
|
</dl>
|
|
)
|
|
}
|
|
|
|
export async function SuccessiveCachedData({
|
|
label,
|
|
cacheKey,
|
|
}: {
|
|
label: string
|
|
cacheKey: string
|
|
}) {
|
|
// This components tests if we correctly handle the case where resolving a cache
|
|
// reveals another cache in the children. When we're filling caches, we should fill both.
|
|
const data1 = await getCachedData(`${cacheKey}-successive-1`)
|
|
return (
|
|
<dl>
|
|
<dt>Cached Data (successive reads)</dt>
|
|
<dd>{data1}</dd>
|
|
<dd>
|
|
<SuccessiveCachedDataChild label={label} cacheKey={cacheKey} />
|
|
</dd>
|
|
</dl>
|
|
)
|
|
}
|
|
|
|
async function SuccessiveCachedDataChild({
|
|
label,
|
|
cacheKey,
|
|
}: {
|
|
label: string
|
|
cacheKey: string
|
|
}) {
|
|
const data2 = await getCachedData(`${cacheKey}-successive-2`)
|
|
console.log(`after successive cache reads - ${label}`)
|
|
return <>{data2}</>
|
|
}
|
|
|
|
export async function CachedFetch({
|
|
label,
|
|
cacheKey,
|
|
}: {
|
|
label: string
|
|
cacheKey: string
|
|
}) {
|
|
const data = await fetchCachedRandom(cacheKey)
|
|
console.log(`after cached fetch - ${label}`)
|
|
return (
|
|
<dl>
|
|
<dt>Cached Fetch</dt>
|
|
<dd>{data}</dd>
|
|
</dl>
|
|
)
|
|
}
|
|
|
|
export async function UncachedFetch({
|
|
label,
|
|
cacheKey,
|
|
}: {
|
|
label: string
|
|
cacheKey: string
|
|
}) {
|
|
const response = await fetch(
|
|
`https://next-data-api-endpoint.vercel.app/api/random?key=${encodeURIComponent('uncached-' + cacheKey)}`
|
|
)
|
|
console.log(`after uncached fetch - ${label}`)
|
|
const data = await response.text()
|
|
return (
|
|
<dl>
|
|
<dt>Uncached Fetch</dt>
|
|
<dd>{data}</dd>
|
|
</dl>
|
|
)
|
|
}
|