# Integrations

> Data fetching with TanStack Query, and React and Next.js on the server.

The core client works anywhere ([The client](https://v12.trpc.io/v12/docs/client/overview.md)). These pages cover the packages that fit it into a framework.

## Data fetching

[TanStack Query](https://v12.trpc.io/v12/docs/integrations/tanstack-query.md) is the stable way to fetch in a UI: `@trpc12/tanstack-query` makes query, mutation and subscription options, and [`@trpc12/tanstack-react-query`](https://v12.trpc.io/v12/docs/integrations/tanstack-query/react.md) provides the client to React components.

- Topics: [query keys and filters](https://v12.trpc.io/v12/docs/integrations/tanstack-query/keys.md), [subscriptions](https://v12.trpc.io/v12/docs/integrations/tanstack-query/subscriptions.md), [streamed mutations](https://v12.trpc.io/v12/docs/integrations/tanstack-query/streamed-mutations.md) and [hydration and offline mutations](https://v12.trpc.io/v12/docs/integrations/tanstack-query/hydration.md).

## React and Next.js

[React and Next.js](https://v12.trpc.io/v12/docs/integrations/react.md) covers fetching in React and the server side:

- [React Server Components](https://v12.trpc.io/v12/docs/integrations/rsc.md): prefetch in server components, stream pending queries to the browser, and tag Next's data cache by query key.
- [Server Actions](https://v12.trpc.io/v12/docs/integrations/server-actions.md): procedures as Server Actions that take typed input or `FormData`.