Is fetch supposed to cache in between next build commands?

[MrHus]

Hello everyone,

I'm trying to statically prerender HTML files for one of my back-end resources, in the form of pokemon detail pages.

I'm running on next version 15.5.2 and I'm seeing the following behaviour: when I run next build it seems to cache my requests in between runs on next build. As I thought that in Next.js 15 that fetches are no longer cached by default, the documentation feels a little unclear.

Here is my journey, first this is the code for a pokemon detail component I started with:

// page.tsx
import { BACK_END } from '@/config';
import { Pokemon } from '../pokedex-types';

export default async function PokemonDetailPage(
  props: PageProps<'/pokedex/[id]'>
) {
  const params = await props.params;

  console.log('fetching pokemon', params.id);

  const response = await fetch(`${BACK_END}/api/pokemon/${params.id}`);
  const json = await response.json();
  const pokemon = json as Pokemon;

  console.log('rendering pokemon', params.id);

  return (
    <h1>
      {pokemon.id} - {pokemon.name}
    </h1>
  );
}

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }];
}

Note: I'm using the generateStaticParams so at build time the pokemon detail pages can be statically generated.

When I'm running the command next build for the very first time, or when deleting the .next/cache directory my back-end is hit with the following request at build time:

GET /api/pokemon/1 200 0.569 ms - 715
GET /api/pokemon/3 200 0.260 ms - 744
GET /api/pokemon/2 200 0.502 ms - 715

The output for next build shows:

fetching pokemon 2
fetching pokemon 1
fetching pokemon 3
rendering pokemon 2
rendering pokemon 1
rendering pokemon 3

Plus the .next/server/app/pokedex folder is filled with generated HTML files as you would expect. So all is good.

However if I run next build again the back-end is never hit it seems that the requests are cached between builds.

The documentation of fetch states (bold emphasis me):

"auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request."

Either the documentation is inaccurate as it should also state that no cache does cache requests between next build commands, or this is a bug of sorts.

So then I tried setting my cache option to no-store to force Next to hit my back-end:

  const response = await fetch(`${BACK_END}/api/pokemon/${params.id}`, {
    cache: 'no-store'
  });

However when I run next build no HTML files are generated in .next/server/app/pokedex and my back-end is not hit. The output of the build command shows something interesting:

fetching pokemon 1
fetching pokemon 3
fetching pokemon 2

The 'rendering' logs are no where to be found, it seems Next.js decides that it should not render anything. When I start the server I can see that it fetches the pokemon on demand.

After some digging I hit on const dynamic on the generateStaticParams docs.

So when I set `export const dynamic = 'force-static' all HTML files are generated and my back-end API is always hit.

In short: I feel that the documentation should make the interactions between no cache and generateStaticParams() more clear, as well as the link between force-static and no-store, on the cache options documentation.

[icyJoseph]

Thanks for this - I'll put this in my stack of TODOs. Here are some thoughts on this matter...

"auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request."

Either the documentation is inaccurate as it should also state that no cache does cache requests between next build commands, or this is a bug of sorts.

Right, this is problematic, because the next run, doesn't clean the cache (though cleanDistDir - true by default - does clean up other items). The purpose of the .next/cache folder is to reuse work already done.

To improve build performance, Next.js saves a cache to .next/cache that is shared between builds.

In this case the statement but will fetch once during next build because the route will be statically prerendered - is not as useful as this other one, found here https://nextjs.org/docs/app/guides/caching#fetch:

Static rendering: Fetched data is stored in the Data Cache, and the rendered output in the Full Route Cache. Next.js serves this cached result until the path is revalidated.

Not that it is way better either, there's observable behavior here that we should communicate. I'll see what I can do to surface this.

force-static and no-store

Also agree here, we need to improve this bit.

When no-store is used, fetch is taken explicitly as a dynamic API, nearly equivalent to saying await connection() pre-rendering ends there.

When you override with force-static the pre-render pass w/ the outputs from generateStaticParams happens, and the fetch happens, and since it has no-store it is also not saved.

This is a bit tricky to document I think - since it is something that export const dynamic = 'force-static' does to no-store fetch requests, perhaps this item belongs to the force-static section.

---

Please do follow up if you think I've missed the mark - gotta get the facts right.

[lilysophie0121-jpg]

It looks like you’ve nailed down the tricky behavior of Next.js fetch and caching during builds. Since you’re already working with Pokémon detail pages, your site Pokémon Team fits perfectly it’s built to help fans plan balanced teams, analyze type coverage, and enjoy strategy beyond just fetching Pokémon data.