tRPC + App directory + SSR - current state?
What is the current state of the technologies working together with or without SSR?
It looks like some work is/was being done around using tRPC with the new app directory but its hard to tell if that work is completed or what is currently supported or recommended.
Can I start a new Next.js project with the new app directory and tRPC and expect to be able to utilize SSR for the RSC (React Server Components)? What problems currently exist? If tRPC requests can't be handled during SSR at this point, can the RSC still render on the server but the tRPC query begin on the client on mount?
What is the current best way to use tRPC with the new app directory that best utilizes all of the new RSC features?
7 Replies
I have a question back - if you use RSC, what features do you miss? What does trpc solve for you?
At this point I am researching all the possibilities and limitations of Next + tRPC for a key design decision for a new project at work. I need to determine if using tRPC compared to a general REST API will hinder us or stop us from using any Next features or vice versa
I may also be missing some information around what RSC actually brings to the table. Is it just SSR / streaming for specific components rather than the whole page? Can the current page still be rendered on the server in the app directory while using tRPC, without using RSC?
I guess there is a lot changing at the moment with Next specifically and I want to make sure I bring current and correct information to the team before we start down a particular development path. It isn't your job to answer questions here about Next specifically but any info about roadblocks I might run into using tRPC with the app router would be appreciated 😄
As written in the tRPC home page,
It only manages the creation and use of a web app’s APIs. So it sounds like it should work okay, as the biggest difference between the pages- and the app-routers rendering is where the server's page rendering code is situated, and not where the API code is. For SSR in the app-router, it's in the server component where you would use tRPC’s router.createCaller() interface for the APIs. In the pages-router, this code would be in getServerSideProps().
Does anyone have a real-life project repo examples with tRPC and Next.js App Dir?
I know there is https://github.com/trpc/examples-next-app-dir, but it's made for example purpose only and it's still experimental. I am looking for some real project.
Does anyone have a real-life project repo examples with tRPC and Next.js App Dir?https://github.com/juliusmarminge/acme-corp
GitHub
GitHub - juliusmarminge/acme-corp
Contribute to juliusmarminge/acme-corp development by creating an account on GitHub.
you gotta know this is all the features are experimental and can be nuked at any point though
I feel like RSC and server actions (next 13), Remix loaders/actions and Qwik loaders/actions already solve the main problem trpc was solving in the first place. But I may have overlooked this. Do you see interesting benefits to using trpc with RSC (now or in the future)?