Theo's Typesafe Cult•3mo ago

Caching does not work with trpc in Next, what would you do?

Hi, I someone in trpc discord said: Currently documented tRPC cacheing methods (https://trpc.io/docs/server/caching) won't work as they rely on setting headers which NextJs now overrides (https://nextjs.org/docs/app/api-reference/next-config-js/headers#cache-control) And this is a big problem, what's a good alternative if I really need to cache my trpc calls? Also, maybe t3 stack should change trpc? Is there any other way to cache db calls? Next cache works only for fetch calls. @nexxel is this an issue for t3? Thanks

Response Caching | tRPC

The below examples uses Vercel's edge caching to serve data to your users as fast as possible.

next.config.js Options: headers | Next.js

Add custom HTTP headers to your Next.js app.

12 Replies

Kenzo•3mo ago

@julius I don't like to @ ppl but I saw your a maitainer of trpc. Does next version of trpc fix it? Hi? any idea?

Aleed.dev•3mo ago

ummm don't know if this should work for you https://react.dev/reference/react/cache.

julius•3mo ago

either React.cache for deduplication within the same request or Next.js' unstable_cache for persistent caching

Kenzo•3mo ago

Oh I really appreciate it Julius 🫡 Got no answers in trpc discord, and saw nothing on their docs I love trpc, But it may need an update on their docs

julius•3mo ago

it's hard to put out generic recommendations when there are not yet a stable api in next requires maintenance "easier" to just leave it out and let people who want to use the unstable apis figure out the integration themselves

Kenzo•3mo ago

True,caching methods are outdated in trpc.. But I saw you are tweaking trpc Fetch. Do you think stale while revalidate will work properly ?

julius•3mo ago

True,caching methods are outdated in trpc.. But I saw you are tweaking trpc Fetch.

How so? http caching should work same as before. But you probably also wanna cache the RSC invocation and that can't be done using http headers honestly I wouldn't expect an official caching story in the trpc docs until next has figured it out on their end they are redoing it in 15 who knows they might revert it in 16 again... we're not gonna put in the effort to support all of these iterations as we simply don't have the time or resources to do so

Kenzo•3mo ago

Yep I see. Next changes too much We cannot change trpc Fetch headers, that's what I meant, so we can't use next fetch things like stale while revalidate That's what I wanted to say XD

julius•3mo ago

there is no fetch from server component and from client component, yes you can change the fetch

Kenzo•3mo ago

Ah okay, so for now I'll use unstable cache, ty!

Fossil•2mo ago

I feel like a tremendous pleb. The regular approach of adding headers to next.config.js adds the correct Cache-Control headers to the response, and the server respects them. cc @Kenzo

// next.config.js
  headers: async () => {
    return [
      {
        source: "/api/trpc/yourRouteName",
        headers: [
          {
            key: "Cache-Control",
            value: "public, s-maxage=90, max-age=90",
          },
        ],
      },
    ];
  },

// next.config.js
  headers: async () => {
    return [
      {
        source: "/api/trpc/yourRouteName",
        headers: [
          {
            key: "Cache-Control",
            value: "public, s-maxage=90, max-age=90",
          },
        ],
      },
    ];
  },

julius•2mo ago

You can do this in responseMeta on the tRPC route handler too More co-located

Gaming

Programming

Caching does not work with trpc in Next, what would you do?