React and Next.js
Which package to fetch with in React, and the pages for server components, Server Actions and route handlers.
On this page
React has three ways to fetch, and the server side of an RSC app has three more pieces. Pick one way to fetch; the server pieces work with any of them.
Fetching in components
| Package | Model | Stability |
|---|---|---|
@trpc12/tanstack-react-query | TanStack Query's options, cache and devtools, with useTrpc() and useSubscription | stable |
@trpc12/experimental-react | Loaders start queries and components read them with use(); cache features are links | experimental |
@trpc12/experimental-react-atom | Queries, mutations and subscriptions as Effect atoms, typed with each procedure's errors | experimental |
Start with TanStack Query unless you already use Effect Atom, or want Suspense without a query cache.
On the server
- React Server Components:
createTrpcRscfrom@trpc12/tanstack-react-query/rscprefetches in server components, streams pending queries to the browser, and tags Next's data cache by query key. - Server Actions:
experimental_createActionfrom@trpc12/trpc/actionsturns procedures into actions that take typed input orFormData, foruseActionStateand 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
- React Server ComponentsPrefetch in server components, stream pending queries to the browser, and tag Next's data cache by query key.
- Server ActionsTurn procedures into React Server Actions that take typed input or FormData, with useActionState and optimistic updates.
- React without TanStack QueryRender-as-you-fetch with use() and Suspense in @trpc12/experimental-react, where cache features are links.
- React atomsQuery, mutation and subscription atoms on Effect Atom, typed with each procedure's errors.