Skip to content

tRPC v12 isn’t on npm yet. The @trpc12/* packages on this site can’t be installed until it’s released. Use v11 today

tRPC

React and Next.js

Fetching in React, and the pages for server components, Server Actions and route handlers.

On this page

React fetches with @trpc12/tanstack-react-query: TanStack Query's options, cache and devtools, with useTrpc() and useSubscription. The server side of an RSC app has three more pieces.

On the server

  • React Server Components: createTrpcRsc from @trpc12/tanstack-react-query/rsc prefetches in server components, streams pending queries to the browser, and tags Next's data cache by query key.
  • Server Actions: experimental_createAction from @trpc12/trpc/actions turns procedures into actions that take typed input or FormData, for useActionState and optimistic updates.
  • Route handlers serve the router with handler.fetch, as in any fetch runtime (Fetch runtimes).

None of these is Next-specific: they work with any React Server Components setup.

Pages under React and Next.js