oimmiO
tRPC•2mo ago•
1 reply
oimmi

Next.js/tRPC RootLayout Caching Error

I'm hitting a specific rendering/caching issue in my Next.js (App Router) RootLayout when trying to fetch data via tRPC.

💻 Code Snippet (app/layout.tsx)


I am trying to fetch the list of categories server-side within the layout:

import { TRPCReactProvider } from "@/trpc/react";
import { api } from "@/trpc/server";

export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  // This line seems to be the source of the uncached access
  const categories = await api.product.category.public_getAll();

  return (
    <html lang="en" className={`${geist.variable}`}>
      <body>
        <TRPCReactProvider>
          {/* ... layout content using categories ... */}
          {children}
        </TRPCReactProvider>
      </body>
    </html>
  );
}


🚨 The Error


I am getting the following critical error, which points to something in the tRPC context creation:

Error: Route "/": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience.
Learn more: https://nextjs.org/docs/messages/blocking-route

The traceback points to the headers() call within my createContext function in src/trpc/server.ts:

15 | const createContext = cache(async () => {
> 16 |   const heads = new Headers(await headers()); // <- Error points here
     |                                             ^
17 |   heads.set("x-trpc-source", "rsc");


Any advice on how to properly integrate tRPC server-side data fetching in the Next.js App Router root layout would be massively.
Was this page helpful?