Xu hướng React năm 2025

 (robinwieruch.de)
16 điểm bởi xguru 2025-03-24 | 1 bình luận | Chia sẻ qua WhatsApp
  • React đang tiến hóa thành một framework full-stack phá vỡ ranh giới client-server
  • Vị thế gần như độc tôn của Next.js đang suy yếu, trong khi TanStack Start và React Router nổi lên như các đối thủ cạnh tranh
  • Các tính năng của React như form, quản lý state, server component và tích hợp AI đang được tăng cường
  • Lập trình viên React trong tương lai cần làm quen với môi trường full-stack

React Server Components (RSC)

  • React Server Components (RSC) là tính năng giúp giảm kích thước bundle JavaScript phía client và tối ưu hiệu năng
    • Công bố lần đầu: 21 tháng 12 năm 2020
    • Triển khai đầu tiên: App Router được giới thiệu trong Next.js 13 (2022)
    • Đạt trạng thái ổn định hơn trong Next.js 15 (2024)
    • Dự kiến React Router và TanStack Start cũng sẽ sớm áp dụng RSC
  • Cách RSC hoạt động
    • Chạy một lần trên server và chỉ gửi kết quả đã render về client
    • Giảm lượng JavaScript phía client
    • Có thể truy cập cơ sở dữ liệu và API từ server (tăng cường bảo mật)

React Server Functions (RSF)

  • React Server Actions (RSA) → một dạng phát triển từ RSC, cho phép chỉnh sửa và cập nhật dữ liệu trên server
    • Thực thi hàm server theo kiểu gọi thủ tục từ xa (RPC) mà không cần định nghĩa API route
    • Sử dụng directive use server
  • React Server Functions (RSF)
    • Tháng 9 năm 2024, đội ngũ React công bố RSF như một khái niệm bao quát hơn, bao gồm cả RSA
    • Có thể hoạt động trong cả RSC và client component
    • Bao gồm cả tác vụ đọc và chỉnh sửa dữ liệu
  • Dự kiến sẽ được triển khai trong Next.js, TanStack Start và React Router

Các cải tiến cho React Forms

  • Trong React 19, các tính năng liên quan đến form đã được cải thiện đáng kể
    • Có thể gọi trực tiếp server action thông qua thuộc tính action của <form>
    • Thêm các hook mới
      • useFormStatus, useOptimistic, useActionState
    • Cải thiện việc quản lý state của form phức tạp
  • Tương thích với các thư viện hiện có
    • Vẫn có thể tiếp tục dùng các thư viện hiện có như React Hook Form
    • Khả năng xử lý form tích hợp sẵn của React trở nên mạnh mẽ và linh hoạt hơn

Library vs Framework (thư viện vs framework)

  • React giờ đây không còn chỉ là một thư viện đơn thuần mà mang tính chất của một framework
    • Hỗ trợ client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR)
    • Cần dùng framework cụ thể (ví dụ: Next.js) mới có thể sử dụng các tính năng RSC và RSF
  • Cần lựa chọn theo yêu cầu của dự án
    • Ứng dụng client đơn giản → có thể dùng chính React
    • Cần tính năng phía server → cần framework như Next.js, TanStack Start hoặc React Router

Cạnh tranh giữa các React Framework ngày càng gay gắt

  • Next.js vẫn là framework phổ biến nhất
  • TanStack Start và React Router có khả năng cao sẽ nổi lên thành đối thủ cạnh tranh trong năm 2025
    • TanStack Start → framework mới dựa trên TanStack Router
    • React Router → phát triển từ Remix và đang được tăng cường tính chất framework
  • Cả hai framework đều dự kiến hỗ trợ RSC và RSF

Full-Stack React

  • Việc bổ sung các tính năng thiên về server cho React → đang thúc đẩy React phát triển thành ứng dụng full-stack
    • Có thể truy cập cơ sở dữ liệu thông qua RSC và RSF
    • Cần hạ tầng backend cho xác thực, phân quyền, caching, v.v.
    • Giao tiếp giữa client và server cũng được đơn giản hóa
  • Khả năng xây dựng ứng dụng AI dựa trên React đang tăng lên

"Shadcnification" của React

  • Shadcn UI → đang trở thành thư viện UI mặc định của React, tương tự Tailwind CSS
    • Cung cấp các component được style sẵn
    • Có thể tùy biến
  • Có thể xuất hiện những cách tiếp cận UI mới
    • Hiện đang xuất hiện hiện tượng các dự án trông khá giống nhau

React và AI

  • Sự gia tăng của việc tạo mã React bằng AI
    • Các công cụ AI (như v0) tự động sinh mã React
  • Gia tăng xây dựng ứng dụng có hỗ trợ AI
    • Có sự hỗ trợ từ Vercel AI SDK, LangChain, v.v.

Biome (trước đây là Rome)

  • Giải quyết vấn đề tích hợp ESLint và Prettier
  • Công cụ nhanh và nhất quán được xây dựng bằng Rust
    • Giành giải thưởng $20,000 của Prettier (2023)
  • Biome → có khả năng cao trở thành toolchain React thế hệ tiếp theo

React Compiler

  • React Compiler → công cụ tự động hóa tối ưu hiệu năng
    • Tự động xử lý useCallback, useMemo, memo
    • Không còn cần memoization thủ công
    • Hiện cung cấp bản beta trong React 19

Bài viết liên quan