tRPC
Framework TypeScript pour créer des APIs end-to-end type-safe sans génération de code ni schémas, garantissant la cohérence entre client et serveur.
Mis à jour le 8 janvier 2026
tRPC (TypeScript Remote Procedure Call) révolutionne le développement d'APIs en exploitant le système de types TypeScript pour créer des interfaces entièrement typées entre client et serveur. Contrairement aux approches traditionnelles nécessitant des schémas externes ou de la génération de code, tRPC infère automatiquement les types depuis vos procédures backend, éliminant la duplication et les erreurs de synchronisation. Cette approche transforme radicalement la productivité des équipes fullstack TypeScript en détectant les incompatibilités d'API dès la compilation.
Fondements
- Inférence de types automatique depuis les procédures serveur vers le client sans configuration supplémentaire
- Architecture RPC (Remote Procedure Call) permettant d'appeler des fonctions serveur comme des méthodes locales
- Validation intégrée avec Zod ou autres bibliothèques de validation TypeScript-first
- Support natif des frameworks modernes (Next.js, React, Vue, Solid) avec adapters dédiés
Avantages
- Élimination complète des erreurs de typage entre client et serveur grâce à l'inférence automatique
- DX exceptionnelle avec autocomplétion IDE, refactoring sécurisé et détection d'erreurs instantanée
- Zéro surcharge : pas de génération de code, pas de build steps supplémentaires, types natifs TypeScript
- Performance optimale avec support du batching, streaming SSE et React Server Components
- Écosystème riche incluant authentification, middleware, caching et intégrations tierces
Exemple concret
import { z } from 'zod';
import { router, publicProcedure } from '../trpc';
export const userRouter = router({
getById: publicProcedure
.input(z.object({ id: z.string() }))
.query(async ({ input, ctx }) => {
const user = await ctx.db.user.findUnique({
where: { id: input.id },
});
return user;
}),
create: publicProcedure
.input(z.object({
name: z.string().min(3),
email: z.string().email(),
}))
.mutation(async ({ input, ctx }) => {
return await ctx.db.user.create({
data: input,
});
}),
});import { trpc } from '../utils/trpc';
export function UserProfile({ userId }: { userId: string }) {
// Types automatiquement inférés depuis le serveur
const { data: user, isLoading } = trpc.user.getById.useQuery({
id: userId
});
const createUser = trpc.user.create.useMutation({
onSuccess: () => {
// Invalidation automatique du cache
trpc.useContext().user.getById.invalidate();
},
});
// TypeScript détecte les erreurs de propriétés
return <div>{user?.name}</div>;
}Mise en œuvre
- Installer tRPC et ses dépendances : @trpc/server, @trpc/client, @trpc/react-query (pour React)
- Créer le contexte tRPC avec les dépendances partagées (DB, auth, logger)
- Définir les procédures avec input validation (Zod) et logique métier organisée en routers
- Configurer l'adapter HTTP/Next.js pour exposer les endpoints API
- Initialiser le client tRPC avec les types inférés et le connecter à React Query
- Implémenter les middlewares pour authentification, logging et gestion d'erreurs
- Organiser les routers par domaine métier avec merge pour composition
Conseil Pro
Utilisez l'helper createCallerFactory pour tester vos procédures côté serveur sans passer par HTTP, et exploitez les transformers (superjson) pour sérialiser automatiquement les types complexes comme Date, Map ou Set. Pour les applications Next.js, privilégiez les App Router avec Server Components pour réduire drastiquement la taille du bundle client.
Outils associés
- Zod - Validation de schémas TypeScript-first pour inputs sécurisés
- TanStack Query (React Query) - Gestion de cache et synchronisation serveur-client
- Superjson - Sérialisation avancée pour types natifs JavaScript
- Prisma - ORM type-safe parfaitement compatible avec tRPC
- NextAuth.js - Authentification intégrée pour contexte tRPC
- tRPC-openapi - Génération automatique de documentation OpenAPI
tRPC représente un changement de paradigme pour les architectures fullstack TypeScript en éliminant la friction traditionnelle entre frontend et backend. En réduisant drastiquement les erreurs de production, accélérant les cycles de développement et améliorant la maintenabilité, tRPC permet aux équipes de se concentrer sur la valeur métier plutôt que sur la plomberie API. Pour les organisations investies dans l'écosystème TypeScript, tRPC devient rapidement un standard incontournable offrant un ROI immédiat en productivité et qualité.
