So for some reason in my server components the response of api fetches is not being fetched.

In the code below a small example i made to check, but this is just showing me a new picture every refresh instead of the same one.

const getPosts = async () => {
  const data = await fetch("https://dog.ceo/api/breeds/image/random", {
      next:{
          revalidate: 500,
      },
      cache: "force-cache",
  });

  return data.json();
};


export default async function Post({
  params,
}: {
  params: {
    site: string;
    slug: string;
  };
}) {
  const posts = await getPosts();


  return (
    <div>
      <img src={posts.message} />
    </div>
  );
}