tRPC•5mo ago•

1 reply

Next.js/tRPC RootLayout Caching Error

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

Code Snippet (

app/layout.tsx

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

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()

headers()

call within my

createContext

createContext

function in

src/trpc/server.ts

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");

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.

Next.js/tRPC RootLayout Caching Error

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

Code Snippet (

app/layout.tsx

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

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()

headers()

call within my

createContext

createContext

function in

src/trpc/server.ts

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");

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.

Next.js/tRPC RootLayout Caching Error

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

The Error

Similar Threads

Next.js/tRPC RootLayout Caching Error

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

The Error

Similar Threads

Similar Threads

Similar Threads

Next.js/tRPC RootLayout Caching Error

Code Snippet (app/layout.tsxapp/layout.tsx)

The Error

Similar Threads

Next.js/tRPC RootLayout Caching Error

Code Snippet (app/layout.tsxapp/layout.tsx)

The Error

Similar Threads

Similar Threads

Similar Threads

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)

Code Snippet (
`app/layout.tsx`
`app/layout.tsx`
)