Tìm hiểu về tRPC: Giải pháp TypeScript cho API

tRPC ra đời để giải quyết vấn đề trùng lặp kiểu dữ liệu giữa frontend và backend trong các dự án TypeScript. Thay vì phải viết schema hoặc API client thủ công như REST hay GraphQL, tRPC sử dụng TypeScript để tự động đồng bộ kiểu dữ liệu, giúp phát triển nhanh hơn và giảm lỗi. Với cách tiếp cận RPC, tRPC mang lại hiệu suất cao, ít boilerplate code và tích hợp tốt với Next.js.

1. Giới thiệu về tRPC

tRPC (TypeScript Remote Procedure Call) là một thư viện giúp xây dựng API mà không cần REST hay GraphQL, tận dụng hoàn toàn sức mạnh của TypeScript để tạo ra một hệ thống giao tiếp mạnh mẽ giữa frontend và backend.

Không giống như REST hoặc GraphQL, tRPC không yêu cầu bạn phải định nghĩa schema hoặc viết API client thủ công, mà sử dụng TypeScript để tạo ra kiểu dữ liệu tự động giữa server và client.

2. Lợi ích của tRPC

🚀 Loại bỏ boilerplate code

• Không cần viết schema hoặc tạo API client như với REST hay GraphQL.
• Giảm đáng kể thời gian phát triển.

🔄 Tự động đồng bộ kiểu dữ liệu

• Kiểu dữ liệu TypeScript giữa backend và frontend được chia sẻ tự động.
• Hạn chế lỗi do không cần viết các kiểu dữ liệu lặp lại ở nhiều nơi.

⚡ Hiệu suất cao

• Không có layer trung gian như GraphQL nên nhanh hơn.
• Sử dụng gRPC-like với cơ chế RPC giúp gọi API nhanh chóng.

✅ Dễ dàng tích hợp với Next.js

• tRPC hoạt động rất tốt với Next.js API routes.
• Có thể kết hợp với React Query để tối ưu hóa fetching data.

3. Cấu trúc của một ứng dụng tRPC

Một ứng dụng tRPC bao gồm 2 phần chính:

1. Router (Server-side) – Định nghĩa API endpoint.
2. Client (Frontend) – Gọi API từ phía client mà không cần fetch thủ công.

3.1. Cài đặt tRPC trong Next.js

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next zod

Ngoài ra, ta cần cài Zod để validate dữ liệu.

4. Cách triển khai tRPC trong Next.js

4.1. Tạo backend với tRPC router

📌 Tạo file trpc.ts để khởi tạo API router:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();

// Định nghĩa router
export const appRouter = t.router({
  hello: t.procedure.query(() => {
    return 'Xin chào từ tRPC!';
  }),
  getUser: t.procedure.input(z.object({ id: z.string() })).query(({ input }) => {
    return { id: input.id, name: 'Minh' };
  }),
});

// Xuất kiểu của router để dùng trong client
export type AppRouter = typeof appRouter;

4.2. Tạo API endpoint trong Next.js

📌 Tạo file pages/api/trpc/[trpc].ts

import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/trpc';

export default trpcNext.createNextApiHandler({
  router: appRouter,
});

4.3. Gọi API từ frontend với React Query

📌 Tạo file utils/trpc.ts để khởi tạo client:

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/trpc';

export const trpc = createTRPCReact<AppRouter>();

📌 Sử dụng API trong frontend:

import { trpc } from '../utils/trpc';

export default function HomePage() {
  const { data, isLoading } = trpc.hello.useQuery();

  if (isLoading) return <p>Đang tải...</p>;
  return <p>{data}</p>; // Hiển thị "Xin chào từ tRPC!"
}

5. tRPC với REST và GraphQL

Khi phát triển API, các lựa chọn phổ biến nhất hiện nay là REST, GraphQL và tRPC. Mỗi công nghệ đều có ưu và nhược điểm riêng. Vì vậy, để hiểu rõ hơn, chúng ta hãy cùng so sánh chúng dựa trên một số tiêu chí quan trọng.

6. Khi nào nên sử dụng tRPC

✅ Dùng khi:

• Dự án full-stack với TypeScript.
• Muốn tối ưu tốc độ và không thích viết API client.
• Đang dùng Next.js hoặc Remix.

❌ Không phù hợp khi:

• Dự án cần hỗ trợ nhiều client không dùng TypeScript.
• Muốn có caching phức tạp như Apollo Client trong GraphQL.

7. Kết luận

tRPC là một lựa chọn mạnh mẽ giúp bạn xây dựng API nhanh chóng, tận dụng TypeScript để đồng bộ kiểu dữ liệu giữa frontend và backend. Nếu bạn đang phát triển một dự án full-stack với Next.js, thì tRPC là một giải pháp đáng để cân nhắc.

Link tài liệu: https://trpc.io/docs