BRK Posts - Answer Overflow

BRK

•Created by BRK on 9/21/2024 in #questions

SSG with tRPC

Hi! I want to render the posts index page using SSG, and it should not be revalidated until the next build or deployment. I’m using the T3 stack with the app router and tRPC. I tried wrapping getPosts with unstable_cache, but encountered the following error:

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

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

The code:

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>
    </>
  );
}

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>
    </>
  );
}

How can I make this work as expected?

2 replies

Gaming

Programming