SSG with tRPC

Error: Route / used "headers" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "headers" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache

import { api } from "~/trpc/server";
import Hero from "./_components/hero";
import PostCard from "./_components/post-card";


const getPosts = async () => {
  return await api.post.getAll();
};

export default async function Home() {;
  const posts = await getPosts();

  return (
    <>
      <Hero />

      <main className="container mx-auto py-24 lg:py-32">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
            {posts.map((country) => (
              <PostCard key={post.id} post={post} />
            ))}
        </div>
      </main>
    </>
  );
}