Theo's Typesafe Cult•4mo ago

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?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

SSG with tRPC