- Full-Stack React Tech Stack cho năm 2025
- Giới thiệu các công nghệ hữu ích để phát triển sản phẩm SaaS hoặc sản phẩm khả dụng tối thiểu (MVP)
- Next.js: Framework dựa trên React, cung cấp sẵn nhiều tính năng như routing, caching, đồng thời hỗ trợ kết nối với backend thông qua các tính năng React mới nhất như server components và server functions
- Astro: Công cụ tùy chọn để tạo landing page cho sản phẩm, được dùng nhằm xây dựng landing page nhanh và cải thiện trải nghiệm nhà phát triển
- Server Components: Các component chạy trên server, cho phép truy cập cơ sở dữ liệu và nhiều tác vụ khác, qua đó đổi mới cách phát triển ứng dụng React full-stack
- Server Functions: Tính năng cho phép thực thi mã phía server từ React component chỉ bằng lời gọi hàm, đồng thời tự động tạo API endpoint
- Server Actions: Tập con của server functions; có các thư viện giúp tăng tính tiện dụng, nhưng cũng có thể tự triển khai trực tiếp
- Tailwind CSS: Công cụ được khuyến nghị để phát triển sản phẩm nhanh và bảo trì CSS lâu dài; một khi đã quen thì rất khó quay lại cách viết CSS truyền thống
- Shadcn UI: Thư viện UI tích hợp mượt mà với Tailwind CSS, cung cấp hệ thống không phiên bản, mang đến cách tiếp cận mới mẻ trong quản lý UI
- Lucide React: Thư viện icon đi kèm tốt với Shadcn UI; trước khi có lựa chọn thay thế tốt hơn thì gần như chưa cần thay thế
- TypeScript: Tiêu chuẩn công nghiệp cho các dự án JavaScript, giúp cải thiện trải nghiệm nhà phát triển, giảm lỗi và nâng cao khả năng bảo trì mã nguồn
- Zod: Thư viện validation phù hợp với TypeScript, chủ yếu dùng cho validation phía server; với form phía client thì tận dụng validation HTML gốc để giảm độ phức tạp
- nuqs: Công cụ để quản lý trạng thái URL trong Next.js một cách type-safe (ví dụ: tìm kiếm, sắp xếp, phân trang); ở framework khác có thể dùng tính năng tích hợp sẵn hoặc thư viện khác
- Zustand: Công cụ tùy chọn để quản lý trạng thái phía client; tần suất sử dụng đã giảm nhờ trạng thái URL, cache dữ liệu phía client và sự phát triển của các ứng dụng React theo hướng server-driven
- React Query: Công cụ tùy chọn dùng cho các tác vụ fetch dữ liệu phía client phức tạp như infinite scroll; nếu dự án không quá phức tạp thì chỉ server components cũng có thể là đủ
- Prisma (ORM): Lựa chọn ORM ổn định; có thể được thay bằng Drizzle theo xu hướng mới, nhưng hiện tại vẫn ưu tiên Prisma
- Supabase (cơ sở dữ liệu): Dịch vụ cung cấp cơ sở dữ liệu Postgres; để giữ tính linh hoạt, chỉ dùng phần database và kết nối bằng Prisma để dễ thay thế sang cơ sở dữ liệu khác khi cần
- Lucia (xác thực): Không còn được bảo trì nữa, nhưng vẫn được dùng như tài liệu học tập để xây dựng hệ thống xác thực với Oslo, Argon2, Arctic..., từ đó có thể triển khai hệ thống xác thực tùy chỉnh mà không phụ thuộc vào giải pháp bên thứ ba
- S3 (tải tệp lên): Có thể xây dựng giải pháp lưu trữ tệp linh hoạt và chi phí thấp bằng AWS S3, presigned URL và AWS IAM; phần lớn dịch vụ bên thứ ba cũng dùng cùng API nên dễ đổi nhà cung cấp khi cần
- Inngest (queue): Công cụ dùng để điều phối các tác vụ phức tạp ở backend, phù hợp với các tác vụ nền không nhạy về thời gian, đồng thời cung cấp hệ thống queue dễ thiết lập và bảo trì
- React Email + Resend: Công cụ đầu giúp tạo template email bằng React component, còn công cụ sau là giải pháp rất tốt để gửi email; tác giả đã chuyển từ Postmark sang Resend và hài lòng với kết quả
- Vercel (hosting): Giải pháp hosting ứng dụng full-stack đã được dùng trong nhiều năm; nếu muốn self-host thì khuyến nghị Hetzner/DigitalOcean và Coolify
- CloudFlare (domain): Sau nhiều trải nghiệm quản lý domain khác nhau, hiện tại CloudFlare đang được dùng rất hài lòng nhờ UI tốt và khả năng đính kèm thông tin bổ sung vào bản ghi DNS
- Stripe (cổng thanh toán): Cổng thanh toán đã dùng trong nhiều năm, có tài liệu và API rất tốt, nhưng có thể trở nên phức tạp khi tính năng và phạm vi API ngày càng mở rộng
- Testing và công cụ: Kết hợp React Testing Library với Cypress/Playwright là lựa chọn tốt; khuyến nghị ESLint (tương lai là Biome) và Prettier. Vẫn dùng Storybook cho tài liệu UI và dùng tsx để chạy TypeScript trong terminal
1 bình luận
Tôi mới biết đến nuqs, cảm ơn bạn.