P.S.Nikhil•9mo ago

How to cache trpc server request next.js app router

is it the right way ctx.headers.set( "Cache-Control", "public, max-age=43200, stale-while-revalidate=120, immutable", );

11 Replies

Fossil•5mo ago

Did you figure this out? I am stumped

P.S.Nikhil•5mo ago

You can use react cache to handle client-side caching, but I haven't figured it out for server api level caching

Fossil•5mo ago

Yea lots of options with clientside cacheing. Kinda ridiculous there's no docs for app router cacheing 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)

Kenzo•3mo ago

omg.. I've been trying this for so long today so, there is no way to Next caches trpc calls?

BeBoRE•3mo ago

You cannot set Cache-Control headers in next.config.js for pages or assets, as these headers will be overwritten in production to ensure that responses and static assets are cached effectively.

Doesn't say anything about the app router and API routes.

BeBoRE•3mo ago

https://vercel.com/docs/edge-network/caching

Caching on Vercel's Edge Network

Vercel's Edge Network caches your content at the edge in order to serve data to your users as fast as possible. Learn how Vercel caches works in this guide.

Kenzo•3mo ago

yeah but i did not found any way to modify fetch headers of TRPC anyway, Julius said (in other discord) that a good alternative if I need to force cache is use unstable cache

Fossil•2mo ago

Can you link to this Kenzo? Holy fck you're right. I feel like a tremendous pleb. This 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",
          },
        ],
      },
    ];
  },

Alex / KATT 🐱•2mo ago

you can use responseMeta() as well https://trpc.io/docs/server/caching#api-response-caching oh, next.js overrides them? i didn't experience that last time i tried it

Kenzo•5w ago

damn I should try that hmm yeah, but I ended up using a more straigh foward way, in other discord as Julius mentioned, react cache + next unstable_cache Also, I was reading you could modify the headers of your trpc frontend calls, but not your backend ones right? or it applies to both? with unstable_cache I totally avoid having to fight against next modifying headers -- At the end, I just wanted to have my beloved stale while revalidate in TRPC easily --- Hey Alex. Let's simplify this. I have a wiki with weapons in a DB. I Want to cache the query and revalidate it when I modify the weapons table for example. Vercel fetch stale while revalidate would work perfectly. But we are using trpc. Not fetch directly. Having to modify the responseMeta is weird for this simple use case Also afaik. You can modify trpc Fetch for client calls not backend

Alex / KATT 🐱•3w ago

open for suggestions and PRs