Tin tức công nghệ

 React 19 ra mắt — bước chuyển lớn trong hệ sinh thái

React 19 đã được phát hành vào cuối năm 2024, mang theo những thay đổi quan trọng giúp React tiến gần hơn tới mô hình server-first (ưu tiên xử lý ở server). Wikipedia+2Brilworks+2 Trong đó:

• Giới thiệu Actions — giúp xử lý cập nhật trạng thái (state) với hàm bất đồng bộ (async) mà không cần thủ công quản lý trạng thái pending, error, optimistic update. Wikipedia+1

• Hỗ trợ tốt hơn cho Server Components (RSC) để có thể render phần UI phía server và chỉ gửi HTML đến client, giảm lượng JavaScript phải tải. Robin Wieruch+2Brilworks+2

• Cải thiện khả năng hydratation, xử lý các component không tương tác (non-interactive) tốt hơn để tránh render dư thừa. Brilworks+2Robin Wieruch+2

Những thay đổi này hướng React tới việc giảm gánh nặng cho phía client, tối ưu hiệu năng và trải nghiệm người dùng.

2. React Server Components — “vũ khí” performance của React

Một trong những xu hướng nổi bật năm 2025 là việc React Server Components (RSC) được sử dụng rộng rãi hơn như một thành phần cơ bản trong thiết kế ứng dụng React. Robin Wieruch+2WireFuture+2

Ưu điểm:

• Server chịu trách nhiệm render các component, chỉ gửi HTML tới client, giảm bundle size. Robin Wieruch+2WireFuture+2

• Có thể truy xuất dữ liệu (database, API) trực tiếp trong component server mà không phải gọi API từ client. Robin Wieruch+2Brilworks+2

• Kết hợp với Client Components — phần tương tác (event, form) vẫn do client xử lý — giúp cân bằng giữa hiệu năng và tương tác. Robin Wieruch+2Brilworks+2

Tuy nhiên, việc áp dụng RSC cần cân nhắc: không mọi phần UI đều nên render phía server, cần xác định rõ phần nào nên “server-first” vs phần nào nên “client-first”.

3. Hệ sinh thái React mở rộng: React Router trở thành framework

Một thay đổi “ngầm” đáng chú ý: Remix — framework nổi tiếng — đã được gộp vào React Router từ phiên bản v7 (tháng 11/2024). Wikipedia

Điều này biến React Router không chỉ là công cụ định tuyến (routing) mà trở thành framework full-stack hỗ trợ server-side rendering, routing, và tương tác giữa client & server. Wikipedia

Điều này giúp các dự án React có thêm lựa chọn ngoài Next.js, đưa thêm sự linh hoạt trong việc chọn stack React phù hợp với nhu cầu dự án.

4. Những kỹ thuật performance mới: Modular Rendering & Adaptive Hydration

Một nghiên cứu mới (2025) đề xuất mô hình Modular Rendering và Adaptive Hydration (MRAH) giúp tối ưu trải nghiệm người dùng:

• Giao diện được chia thành các module độc lập, mỗi module có thể render và hydration riêng biệt. arXiv

• Tùy theo thiết bị người dùng, điều kiện mạng hay độ quan trọng của module, component có thể delay hydration, hoặc thậm chí không hydrate nếu không cần tương tác. arXiv

• Kết hợp react-lazy-hydration, dynamic import() và kiểm tra điều kiện hiển thị để quyết định thời điểm hydrate module cụ thể. arXiv

Mô hình này giúp giảm công việc JavaScript ban đầu, cải thiện First Input Delay (FID) và Time to Interactive (TTI) — hai chỉ số quan trọng về hiệu suất