Why is the result of this fetch request in Next.js not cached?

Question

I have the following server component in Next.js:

export default async function Home() {
  async function fetch_visits() {
    return (
      await (
        await fetch(
          'https://webcodingcenternextjs9lrayfq-mqjz--3000--60a75bde.local-credentialless.webcontainer.io/data',
          { cache: 'force-cache' }
        )
      ).json()
    ).visits;
  }
  return (
    <>
      <p>Count: {await fetch_visits()}</p>
      <p>Count: {await fetch_visits()}</p>
      <p>Count: {await fetch_visits()}</p>
    </>
  );
}

I expect the output to be:

Count: 2

Count: 2

Count: 2

but it turned out to be

Count: 2

Count: 3

Count: 4

Why isn't the built-in caching working?

More information about cached fetching can be found here.

Answer 1

I just realized that I have to build the site statically and run the production server for the caching. The problem was that I was using the hot-reloading development server.