all my fetches i cache:miss in development
#i get cache: MISS in development
manic lagoon
gleaming jungleBOT
Hi @manic lagoon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, all fetch() requests are cached and deduplicated automatically by default. This means that if you make the same request twice, the second request will reuse the result from the first request. However, there are certain conditions where requests are not cached:
- Dynamic methods (
next/headers,export const POST, or similar) are used and the fetch is aPOSTrequest (or usesAuthorizationorcookieheaders) fetchCacheis configured to skip cache by defaultrevalidate: 0orcache: 'no-store'is configured on individualfetch
Here's an example of how fetch requests are cached:
async function getComments() {
const res = await fetch('<https://...'>) // The result is cached
return res.json()
}
// This function is called twice, but the result is only fetched once
const comments = await getComments() // cache MISS
// The second call could be anywhere in your application
const comments = await getComments() // cache HIT
If you're seeing cache:miss for all your fetches, it's possible that one of the conditions for not caching is being met. You might want to check your fetchCache configuration or the individual fetch configurations in your code.
You can also control the revalidation frequency of the request by specifying a revalidate option:
export default async function Page() {
// revalidate this data every 10 seconds at most
const res = await fetch('<https://...',> { next: { revalidate: 10 } })
const data = res.json()
// ...
}