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
31 lines
2.7 KiB
Plaintext
31 lines
2.7 KiB
Plaintext
---
|
|
title: Caches Bypassed in Development Mode
|
|
---
|
|
|
|
## Disabling Caches in Development Mode
|
|
|
|
While running Next.js in development mode with `next dev` an initial page load or client navigation was handled with a `cache-control: no-store` header. The most common reason for this is that you have your web browser's DevTools open with "Disable Cache" enabled. Another common reason is you performed a hard refresh (Cmd + Shift + R / Ctrl + Shift + R).
|
|
|
|
Disabling caches while in development mode affects the debugging experience of Cache Components. Read on to understand more about how Next.js handles caches in development mode and what changes when they are intentionally disabled.
|
|
|
|
## Understanding Cache handling in Development Mode
|
|
|
|
In development mode, Next.js ensures that Cache Components render in the right environment to allow for React DevTools to highlight which components are part of the available for prerendering statically before any user request, which are available when prefetching segments at runtime before a navigation occurs, and finally which are dynamic and will only be fetched on user navigation.
|
|
|
|
This behavior has a small cost when a cold cache is encountered. Rather than streaming immediately Next.js will wait to fill this cache before streaming the response. As you navigate around you App in development mode these caches will fill and most navigations to cached content should feel instant once warm.
|
|
|
|
However if you instruct Next.js to skip all server caches using something like the "Disable Cache" option in your browser's DevTools, this behavior would be detrimental since every cache will be considered cold on every request leading to blocking navigations. Instead Next.js prints a warning that this particular request is not suitable for debugging Cache Components and then renders fresh results as fast as possible.
|
|
|
|
## Should you use "Disable Cache"?
|
|
|
|
Chrome, in particular, defaults all network request to "Disable Cache" when DevTools is open. For Next.js this is not recommended because it is overly aggressive in what is not cached and can provide a false impression of page performance that doesn't represent realistic usage of a web app.
|
|
|
|
However there are times when disabling a server caches can be useful. For instance if you know some upstream data system has updated but these updates are not connected to your local dev environment through features like `revalidateTag`.
|
|
|
|
If you must turn on "Disable Cache" to force a refresh we recommend that you disable the option once you've achieved your goal.
|
|
|
|
## Useful Links
|
|
|
|
- [`revalidateTag` function](/docs/app/api-reference/functions/revalidateTag)
|
|
- [`"use cache"` directive](/docs/app/api-reference/directives/use-cache)
|