Xu hướng React năm 2024

Astro (cùng với React)

• Năm ngoái, Astro xuất hiện như người kế nhiệm của Gatsby
• Astro chủ yếu được biết đến như một công cụ cho website tĩnh, nhưng cũng đang trở nên phổ biến với web application và API endpoint
• Các website được xây dựng bằng Astro xử lý việc render trên server nên mặc định có hiệu năng rất tốt
• Astro có thể được sử dụng ngay cả khi không có React hay UI framework, và có thể tạo UI component thông qua file .astro
• Khi dùng cùng React, chỉ HTML và CSS được gửi tới trình duyệt, và JavaScript chỉ được cung cấp khi cần
  • fast-by-default

Xác thực (trong React)

• Nhờ nhiều startup và dự án mã nguồn mở, chủ đề xác thực trong React lại trở nên thú vị
• Bên cạnh Firebase Authentication, Auth0, Passport.js, NextAuth, còn xuất hiện thêm các lựa chọn xác thực mới
• Supabase là một lựa chọn thay thế Firebase mã nguồn mở, cung cấp nhiều tính năng đa dạng
• Clerk chỉ tập trung vào xác thực, giúp đăng ký và đăng nhập người dùng trong React trở nên dễ dàng
• Lucia đã trở nên phổ biến cùng với Astro, đồng thời cung cấp mã nguồn mở và một lớp trừu tượng hóa rõ ràng với cơ sở dữ liệu

Ứng dụng React full-stack với tRPC

• tRPC đã trở thành lựa chọn yêu thích của tôi cho các ứng dụng full-stack an toàn kiểu dữ liệu
• Trong khi Prisma tạo ra type từ database model của backend application, tRPC duy trì tính an toàn kiểu dữ liệu xuyên suốt lớp API từ backend sang frontend
• Thông qua đặc tính cốt lõi là remote procedure call, tRPC cho phép client application gọi API ở backend như gọi các hàm thông thường
• tRPC sử dụng đặc tả JSON-RPC và tầng truyền tải HTTP, đồng thời khi kết hợp với react-query sẽ hỗ trợ caching hiệu quả và batching request

React Server Components và Next.js

• React Server Components (RSC) đã được cộng đồng triển khai và chấp nhận trong năm ngoái thông qua Next 13.4
• RSC đang mang đến một sự chuyển đổi mô hình lớn cho phát triển web
• RSC có thể là thay đổi còn lớn hơn cả React Hook, vì nó buộc chúng ta phải nghĩ lại cách sử dụng React component trong các ứng dụng lớn hơn
• Với RSC, có thể lấy dữ liệu ở cấp độ component trên server trước khi component được gửi (hoặc stream) tới trình duyệt, từ đó cải thiện hiệu năng
• Tôi tò mò RSC sẽ đóng vai trò gì khi tRPC và react-query được dùng cho giao tiếp client-server, còn bản thân RSC lại lấy dữ liệu từ server. Rất mong chờ xem năm nay sẽ có kết quả gì

TanStack Router cho SPA React

• Tanner Linsley cho rằng SPA (Single Page Applications) vẫn chưa chết
• Anh là người từng tham gia tạo ra react-query và react-table, và nay công bố thư viện mới TanStack Router
• Dù nhiều nhà phát triển đang chọn các meta-framework như Next.js và Remix với router tích hợp sẵn (và cũng tập trung vào triển khai RSC, đồng thời dùng router React phổ biến nhất bên trong), nhưng vẫn chưa ai xây dựng một router an toàn kiểu dữ liệu cho React từ đầu
• TanStack Router lấp đầy một khoảng trống quan trọng trong hệ sinh thái React, là một router mới có hỗ trợ TypeScript
• Router này cho phép nhà phát triển đọc và ghi trạng thái URL theo cách an toàn kiểu dữ liệu

Vercel đẩy React ra Edge

• Vercel là công ty đang thúc đẩy Next.js, một framework gắn bó sâu sắc với phong trào RSC
• Vì nhiều nhà phát triển cốt lõi đã được Vercel tuyển dụng, nên nhiều người xem Vercel là động lực đứng sau React
• Vercel không chỉ mở rộng ranh giới của React với RSC, mà còn mở rộng cách triển khai hiệu quả React application và phân phối tới người dùng thông qua Next.js
• Khi dùng ứng dụng Next trên Vercel, có thể stream React component thông qua edge runtime
• Việc stream React component ở edge như vậy tạo ra ảnh hưởng lớn tới hiệu năng
• Kết hợp với các serverless DB như PlanetScale, vốn có bản sao trên toàn cầu, đây sẽ là một xu hướng thú vị cho cách lưu trữ ứng dụng trong tương lai (hoặc vị trí lưu trữ tốt hơn)

Bundler cho React: Turbopack vs Vite

• Turbopack là người kế nhiệm của Webpack; dù chưa đến mức sẵn sàng cho production, nó đã có thể dùng cho phát triển cục bộ trong ứng dụng Next.js
• Trước đây, bundler vốn đã gánh nhiều trách nhiệm, nhưng xu hướng kết hợp client component và server component trong cả môi trường phát triển lẫn production đang tạo ra nhu cầu cho một kiểu bundler mới
• Cá nhân tôi từng muốn thấy Vite và các tính năng phía server của nó được dùng trong Next.js, nhưng trong khi Remix, các meta-framework khác và các SPA đang chọn Vite, thì Vercel/Next lại bắt đầu phát triển Turbopack

React Compiler (còn được biết đến với tên React Forget)

• Các nhà phát triển React thường than phiền về việc sử dụng useCallback, useMemo, memo
• Đội ngũ React đang âm thầm phát triển một trình biên dịch tên là React Compiler để tự động hóa toàn bộ việc memoization trong React application
• Quy trình thủ công để memo hóa hàm (useCallback), giá trị (useMemo) và component (memo) được kỳ vọng sẽ biến mất trong tương lai
• React sẽ tự memo hóa mọi thứ để không cần phải tính toán lại tất cả ở lần render tiếp theo
• React Compiler sẽ tự động hóa việc memoization thủ công này và cải thiện hiệu năng của React application
• Có lẽ nó sẽ được công bố tại React 19 hoặc React Conf 2024

Biome

• Có nhiều phàn nàn về cấu hình và sự tương tác giữa ESLint và Prettier, và Biome (trước đây là Rome) muốn cung cấp một giải pháp toolchain tích hợp, nhanh gọn để thay thế chúng
• Một lựa chọn thay thế khác trong mảng all-in-one toolchain là oxc (JavaScript Oxidation Compiler), trông cũng rất hứa hẹn

Thư viện Headless UI cho React

• Các nhà phát triển React có xu hướng thay đổi thư viện UI yêu thích của mình mỗi năm
• Vài năm trước họ dùng Material UI, rồi chuyển sang Semantic UI/Ant Design, sau đó là Chakra UI, rồi Mantine UI, và năm ngoái thì ổn định với shadcn/UI
• Tất cả những lựa chọn trước đây chủ yếu xuất phát từ nhu cầu về thiết kế và tính tiện dụng, nhưng với shadcn/UI thì có một vài điểm đã thay đổi
• shadcn/UI là thư viện UI phổ biến đầu tiên hoàn toàn chấp nhận Tailwind và cho phép tùy biến thiết kế component
• Thư viện Headless UI là xu hướng cung cấp chức năng và khả năng truy cập mà không áp đặt thiết kế
• Các giải pháp CSS-in-JS như Styled Components hay Emotion tạo thêm gánh nặng cho client/trình duyệt, vì vậy những giải pháp CSS-in-JS mới như StyleX giảm bớt vấn đề này bằng cách biên dịch sang CSS ưu tiên utility

[firea32]

https://github.com/facebook/react-strict-dom
Tôi cũng đang kỳ vọng vào react-strict-dom.
Nếu ra mắt đúng nghĩa thì có vẻ nó sẽ có thể thay thế react-native-web.

[greenhead]

React Forget thật sự rất đáng mong đợi.