Seconding this! It's been hard to find any authoritative sources on TRPC usage with the App Router.

Yes, please. I'm going crazy here trying to prefetch an infinite query and I'm not smart enough to figure it out myself. Anyone got some example code for how to get it to work? I've seen some examples where they use an server side helper, call prefetchInfinite, dehydrate the queryclient, then pass it to a HydrationBoundary. But yeah, can't get it to work.

This can help you and I will be writing a blog article by today

This is minimalist example and very easy to understand

https://github.com/Pavan-Rajesh/tRPC-Nextjs-App-Router-Minimal.git

Some of the things in the above video are deprecated and some of the docs are also deprecated but vscode helped me ^-^

Bump. Also relates to #5625

I can find no explanation anywhere for how to cache trpc endpoints when using the NextJS App Router

@jeffrey-computers I think Nick Lucas (don't want to ping him here) mentioned on twitter, that the documentation is not being updated until v11 is released: https://x.com/NckLcs/status/1788275302340100304

I think the closest thing to what we want to recommend if you have a monolithic app is to use @trpc/server as a slim data layer on top of your backend - you can see that here (in this specific directory) https://github.com/trpc/examples-next-app-dir/tree/main/src/app/posts

If you're running a separate service for your api layer, it'll likely look quite different. If you are making an SPA, it looks more like how it always has.

It's hard to know what people actually expect and how people want to use trpc for in this new world where React, since RSC and server actions, solves a lot of the things that trpc was created for.

It's hard to know what people actually expect and how people want to use trpc for in this new world where React, since RSC and server actions, solves a lot of the things that trpc was created for.

Here's my take on why I'm still interested in TRPC and why I'm not as hyped about RSC and Server Actions as many.
Warning: so far I've used neither NextJS_with_actions nor TRPC, besides a couple of sandboxes (currently on Zodios), take my conclusions with a grain of salt:

For me, State Control is the most important point, though others matter as well. When doing frontend-dev, I've been building mostly admin panels these days. Since around 2021 NextJS has started to move away from SPA mindset (heavy-interactive), and cater more to heavy-content customers like E-Commerce and image/video platforms. They optimize first load "at all costs" but the first load does not matter nearly as much for interactive apps like games, CMS', etc. Consequent loads, UX performance, dev. experience matters more... and that part was completely ignored (before React 19 that drops stale internals and fixes memoization routine, something good at last). Vercel is free to pursue their business goals, of course, but engineers know that "strongly optimized for X" is inevitably "suboptimal for Y".

Cache invalidation (that NextJS wants me to perform on the server) couples actions to frontend URLs making them barely reusable and/or requires even more wrapping code. Invalidation via tags is rudimentary, the whole thing doesn't stand a comparison with React-Query' rich cache and invalidation functionality. The lack of features on the server and on the client, by contrast to what we used to have with separate API server + e.g. TRPC, is deal-breaking for us. And it can't be easily fixed, IMO, due to their implementation decisions.. Maybe with NextJS v20, who knows 😅

TLDR. If you have most of your logic on the backend... why not use Go/Python instead of NextJS (TypeScript)?

This issue has been locked because we are very unlikely to see comments on closed issues. If you are running into a similar issue, please create a new issue. Thank you.