#What does this mean if I am getting (cache: HIT) for fetch POST request?

1 messages · Page 1 of 1 (latest)

echo grotto
#

I thought that revalidate only works got fetch GET request

rugged compassBOT
#

Hi @echo grotto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The revalidate option in Next.js is not limited to fetch GET requests. It is a feature of Next.js that allows you to update specific static routes without needing to rebuild your entire site. This process is also known as Incremental Static Regeneration (ISR).

There are two types of revalidation in Next.js:

  1. Background: This revalidates the data at a specific time interval. You can use the next.revalidate option in fetch() to set the cache lifetime of a resource (in seconds). Here's an example:
fetch('<https://...',> { next: { revalidate: 60 } })
  1. On-demand: This revalidates the data based on an event such as an update. You can use revalidatePath or revalidateTag to revalidate data associated with a specific path or cache tag respectively. Here's an example:
import { NextRequest, NextResponse } from 'next/server'
import { revalidateTag } from 'next/cache'
 
export async function GET(request: NextRequest) {
 const tag = request.nextUrl.searchParams.get('tag')
 revalidateTag(tag)
 return NextResponse.json({ revalidated: true, now: Date.now() })
}

In addition to fetch, you can also revalidate data using cache. If you want to revalidate data that does not use fetch (i.e. using an external package or query builder), you can use the route segment config.

For more information, you can refer to the Next.js documentation on revalidating data (https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@echo grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

echo grotto
#

@rugged compass What does (cache: HIT) for fetch POST request means then?

rugged compassBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The cache: HIT status for a fetch POST request in Next.js means that the data for the request is already available in the cache and has not exceeded the revalidation time. This means that the data does not need to be fetched again from the original source, and the cached data can be used instead, making the process more efficient.

Here's an example of how caching works in Next.js:

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

In this example, the getComments function is called twice. The first call results in a cache: MISS because the data is not yet in the cache, so it is fetched from the original source. The second call results in a cache: HIT because the data is already in the cache from the first call, so it does not need to be fetched again.

However, it's important to note that POST requests are not cached by default in Next.js. They are only cached if they are not using dynamic methods (next/headers, export const POST, or similar) and the fetch is not a POST request (or uses Authorization or cookie headers), fetchCache is not configured to skip cache by default, and revalidate: 0 or cache: 'no-store' is not configured on individual fetch.

For more information, you can refer to the Next.js documentation on caching (https://nextjs.org/docs/app/building-your-application/data-fetching/caching).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: