#how can i cache fetch during build in next.js

1 messages · Page 1 of 1 (latest)

wanton tapir
#

During my build i use the same fetch for different pages. I want to cache this fetch during builds. Is this possible?

shrewd ermineBOT
#

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

#

Yes, it is possible to cache fetch requests during builds in Next.js. By default, all fetch() requests are cached and deduplicated automatically. This means that if you make the same request twice, the second request will reuse the result from the first request. Here's an example:

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

However, requests are not cached if:

  • Dynamic methods (next/headers, export const POST, or similar) are used and the fetch is a POST request (or uses Authorization or cookie headers)
  • fetchCache is configured to skip cache by default
  • revalidate: 0 or cache: 'no-store' is configured on individual fetch

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()
 // ...
}

For more information, you can refer to the Next.js documentation on data fetching and 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:

#

@wanton tapir kapa.ai is still learning and improving, please let us how it did by reacting below

wanton tapir
#

@shrewd ermine But is this also when i build pre-render pages (SSG)?

shrewd ermineBOT
#

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

#

Yes, the caching of fetch requests also applies when you're building pre-rendered pages (Static Site Generation or SSG) in Next.js.

During the build process, Next.js pre-renders the pages and any data fetching calls made within getStaticProps are cached. This means if you're fetching the same data across multiple pages, Next.js will deduplicate these requests and prevent the same data from being fetched more than once.

Here's an example:

export async function getStaticProps() {
  const res = await fetch('<https://...',> { cache: 'force-cache' }) // The result is cached
  const data = await res.json()

  return {
    props: {
      data,
    },
    revalidate: 10, // Optional: revalidate data every 10 seconds
  }
}

In this example, the fetch request is made within getStaticProps, which is a function that runs at build time in a server-side environment. The fetched data is then passed as a prop to your page.

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

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

#

@wanton tapir kapa.ai is still learning and improving, please let us how it did by reacting below

wanton tapir
#

@shrewd ermine is there any way i can check which calls are cached

shrewd ermineBOT
#

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

#

The information provided in the extracts does not specify a direct way to check which calls are cached during the build process in Next.js. However, you can infer from the behavior of your application and the rules of caching in Next.js.

As mentioned earlier, by default, all fetch() requests are cached and deduplicated automatically. This means that if you make the same request twice, the second request will reuse the result from the first request.

However, requests are not cached if:

  • Dynamic methods (next/headers, export const POST, or similar) are used and the fetch is a POST request (or uses Authorization or cookie headers)
  • fetchCache is configured to skip cache by default
  • revalidate: 0 or cache: 'no-store' is configured on individual fetch

For more detailed information about your application's caching behavior, you might need to use additional tools or services that provide insights into HTTP requests and caching, or check the server logs if you have access to them.

For more information, you can refer to the Next.js documentation on data fetching and 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:

#

@wanton tapir kapa.ai is still learning and improving, please let us how it did by reacting below

wanton tapir
#

@shrewd ermine the pre- render pages are they stored at the edge cdn?

shrewd ermineBOT
#

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

#

Yes, pre-rendered pages in Next.js are stored at the edge CDN. This is part of the Static Site Generation (SSG) and Incremental Static Regeneration (ISR) features of Next.js.

When you generate a page at build time using getStaticProps, the HTML is generated and can be cached by a CDN with no extra configuration. This means the pre-rendered page can be served very quickly to users, improving performance.

For example, in the Pagination with SSG (https://vercel.com/templates/next.js/pagination-with-ssg) example, the first 5 paginated pages are cached in the edge at build time, and the rest are incrementally cached using ISR.

Also, when you use fallback: 'blocking' in getStaticPaths, new paths not returned by getStaticPaths will wait for the HTML to be generated, identical to SSR, and then be cached for future requests so it only happens once per path.

For more information, you can refer to the Next.js documentation on deploying (https://nextjs.org/docs/pages/building-your-application/deploying), rendering (https://nextjs.org/docs/pages/building-your-application/rendering), and data fetching (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props).

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

#

@wanton tapir kapa.ai is still learning and improving, please let us how it did by reacting below

wanton tapir
#

@shrewd ermine If i use the new app routing? do i need to do something to get the pre prender pages to the edge CDN

shrewd ermineBOT
#

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

#

When using the new App Router in Next.js, you don't need to do anything extra to get your pre-rendered pages to the edge CDN. The process remains the same as with the Pages Router.

When you generate a page at build time using getStaticProps, the HTML is generated and can be cached by a CDN with no extra configuration. This means the pre-rendered page can be served very quickly to users, improving performance.

For example, in the Pagination with SSG (https://vercel.com/templates/next.js/pagination-with-ssg) example, the first 5 paginated pages are cached in the edge at build time, and the rest are incrementally cached using ISR.

Also, when you use fallback: 'blocking' in getStaticPaths, new paths not returned by getStaticPaths will wait for the HTML to be generated, identical to SSR, and then be cached for future requests so it only happens once per path.

For more information, you can refer to the Next.js documentation on deploying (https://nextjs.org/docs/pages/building-your-application/deploying), rendering (https://nextjs.org/docs/pages/building-your-application/rendering), and data fetching (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props).

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

#

@wanton tapir kapa.ai is still learning and improving, please let us how it did by reacting below

wanton tapir
#

@shrewd ermine but what happen if i set export const runtime = 'edge' in my page.js

shrewd ermineBOT
#

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