Next.js how to use tRPC with a server components correctly

soup_sam

I am learning T3 stack with App router. But I ran into a problem with using tRPC. 90% tutorial in the Internet shows how to combine tRPC with next js using hooks, for example: const {data: posts, isLoading} = api.posts.all.useQuery({}); But it's a hook! It can be rendered only in a client component. So it kills SSR, SSG, whatever. IDK why everybody on youtube shows this way to get data. I have watched a video like this on the official Theo T3 YT...

Originally asked by Влад Рогов on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

The second option, createCaller , seems to be the recommended approach (see Server Side Calls | tRPC ). As for your error Page couldn't be rendered statically because it used 'headers' , more information is needed to figure out the underlying cause. Calling it should opt the page into dynamic rendering, and so the error showing up probably means an incorrect call.

Full answer by Violet Rose: https://stackoverflow.stackexchange.com/a/80005036 (CC BY-SA 4.0).

Need it done for your business? UphillTech.