export const dynamic = 'force-dynamic'

'force-dynamic': Force dynamic rendering, which will result in routes being rendered for each user at request time. This option is equivalent to getServerSideProps() in the pages directory.

Opting out of the Data Cache: If a route has a fetch request that is not cached, this will opt the route out of the Full Route Cache. The data for the specific fetch request will be fetched for every incoming request. Other fetch requests that do not opt out of caching will still be cached in the Data Cache. This allows for a hybrid of cached and uncached data.

import { revalidateTag } from 'next/cache';

export default async function DogsPage() {
  async function revalidate(formData: FormData) {
    'use server';
    const tag = formData.get('tag') as string;
    console.log(tag);
    revalidateTag(tag);
  }

  const dog1 = await getDog1('dog1');
  const dog2 = await getDog2('dog2');

  return (
    <div>
      <h1>Dogs Page</h1>
      <h2>{Date.now()}</h2>
      <img src={dog1.message} alt="" />
      <form action={revalidate}>
        <button name="tag" value="dog1">
          Revalidate
        </button>
      </form>
      <img src={dog2.message} alt="" />
      <form action={revalidate}>
        <button name="tag" value="dog2">
          Revalidate
        </button>
      </form>
    </div>
  );
}

async function getDog1(tag: string) {
  const response = await fetch('https://dog.ceo/api/breeds/image/random', {
    next: {
      tags: ['dog1'],
    },
  });
  const data = await response.json();
  return data;
}

async function getDog2(tag: string) {
  const response = await fetch('https://dog.ceo/api/breeds/image/random', {
    next: {
      tags: ['dog2'],
    },
  });
  const data = await response.json();
  return data;
}

const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};