mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Josh StoryandGitHub
49fcbd93f2
In Dev, to ensure the component metadata that powers React DevTools accurately reflects the cached, prerendered, or dynamic nature of Server Components, Next.js ensures that any caches encountered during the prerender are warm before streaming. However when users have chrome devtools open with "disable caches" or when a hard refresh is performed requests are made with a cache header that instructs Next.js to bypass all server caches. In these cases every request will always have empty caches and thus the entire request will block on the time it takes to fill all caches. It isn't reccomended to typically disable cache while developing with Next.js because it is even more aggressive than the cold cache scenario real users would encounter with a production deployment. But there are some reasons why it is legitimate, for instance when you want to force any latent caches in memory to by skipped. When this happens Next.js will now skip cache warming to ensure the render is streamed quickly. We will also warn in the console that the request did not have caches warmed up and Component Metadata in React DevTools won't accurately reflect which components are cacheable and prefetchable. In the future we will also show this state in the Next.js devtools UI so it is clearer you are operating in this mode without having to read a warning log in the console
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { Suspense } from 'react'
|
|
import Link from 'next/link'
|
|
|
|
export default async function Page() {
|
|
return (
|
|
<main>
|
|
<section>
|
|
<p>
|
|
This page has has a slow to fill cache. When not bypassing the dev
|
|
cache the initial load should be slow while the cache warms up. You
|
|
won't see the Suspense fallback because the entire response is blocked
|
|
until the cache warms up. Subsequent loads should be fast because the
|
|
cache is warm and nothing needs to Suspend When bypassing caches in
|
|
dev with "disable cache" the request should instantly show a fallback
|
|
UI and show the final content after the delay.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<Suspense fallback={<p>Loading from cache...</p>}>
|
|
<CachedData />
|
|
</Suspense>
|
|
</section>
|
|
<Link href="/other">/Other</Link>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
async function CachedData() {
|
|
'use cache'
|
|
|
|
await new Promise((r) => setTimeout(r, 2000))
|
|
|
|
return <p>{42}</p>
|
|
}
|