Quy Trình Hydration Trong React: Biến HTML Tĩnh Thành Tương Tác

Giới thiệu về React Hydration

Trong thế giới phát triển web hiện đại, React Hydration đã trở thành một khái niệm quan trọng giúp tạo ra những trải nghiệm người dùng mượt mà và hiệu quả. Theo Dan Abramov, người sáng lập Create React App và Redux, quá trình này có thể được hình dung như việc "tưới nước" cho HTML tĩnh bằng "dòng nước" của các tương tác người dùng và bộ xử lý sự kiện. Để hiểu rõ hơn về Hydration, chúng ta cần tìm hiểu một số khái niệm cơ bản như Client-Side Rendering (CSR) và Server-Side Rendering (SSR).

So sánh CSR và SSR

Client-Side Rendering (CSR): Trong mô hình này, toàn bộ trang web được tải và hiển thị trực tiếp trên trình duyệt bằng JavaScript. Trình duyệt sẽ xử lý tất cả các yêu cầu như tìm nạp dữ liệu, quản lý trạng thái tải và các tương tác khác của người dùng.
Server-Side Rendering (SSR): Ngược lại, các trang web được tạo ra trên máy chủ bằng JavaScript và gửi dưới dạng HTML đến trình duyệt. Cách thức này giúp tối ưu hóa việc tìm nạp dữ liệu từ máy chủ, từ đó nâng cao trải nghiệm người dùng. HTML ban đầu được tải nhanh chóng trong khi JavaScript cần thiết cho các tương tác sẽ được tải sau đó.

Hydration Là Gì?

Hydration là quá trình chuyển đổi HTML đã được render trên máy chủ thành dạng tương tác trong trình duyệt. Nói cách khác, React sẽ kiểm tra HTML có sẵn và kết nối JavaScript cần thiết để kích hoạt các thành phần, cho phép người dùng tương tác với trang web. Nhờ vào Hydration, tốc độ tải trang được cải thiện, vì nội dung tĩnh (HTML ban đầu) được tải nhanh chóng trước khi kích hoạt tính năng tương tác.

Lưu Ý Về Hydration

Cần lưu ý rằng Hydration không áp dụng cho các thư viện hay framework chỉ hoạt động trên phía khách (client-only), chẳng hạn như React khi được sử dụng hoàn toàn ở chế độ Client-Side Rendering (CSR). Trong các mô hình client-only, không có HTML được render sẵn từ máy chủ để "hydrate", vì vậy quy trình Hydration không thể được thực hiện.

Hình Dung Quá Trình Hydration

Hãy tưởng tượng bạn có một trang web đã được render hoàn toàn với nội dung hiển thị nhưng không phản hồi khi người dùng bấm vào các nút. Vai trò của React Hydration chính là "thổi hồn" vào trang web này, kết nối những gì hiển thị với đoạn mã nhóm khả năng tương tác. Khi React thực hiện quá trình Hydration, nó sẽ "làm sống động" trang web, kết nối các thành phần hiển thị với mã, cho phép các nút và các yếu tố khác hoạt động trong trình duyệt.

Những Điểm Mới Trong React 19

Thay Đổi Từ hydrate Đến hydrateRoot

Trong React 19, phương thức hydrate đã được thay thế bằng hydrateRoot, mang lại những cải tiến đáng kể. Dưới đây là so sánh giữa cú pháp trước và sau:

Trước (React 18 và các phiên bản trước):

javascript Copy

import { hydrate } from 'react-dom'; 
hydrate(<App />, document.getElementById('root'));

Sau (React 18 và các phiên bản mới):

javascript Copy

import { hydrateRoot } from 'react-dom/client'; 
hydrateRoot(document.getElementById('root'), <App />);

Bản cập nhật này được nhóm phát triển React giới thiệu nhằm cải thiện quy trình Hydration và đảm bảo tính tương thích với các API mới trong React 19.

hydrate trong các phiên bản trước của React bắt đầu quá trình Hydration từ điểm mà máy chủ dừng lại với HTML.
hydrateRoot trong React 18 và các phiên bản mới cung cấp API hiện đại và linh hoạt hơn, hỗ trợ các tính năng như streaming và chuyển đổi trong React.

Kết Luận

Qua bài viết này, bạn đã có cái nhìn tổng quan về quy trình Hydration trong React. Rất mong các kiến thức này sẽ hữu ích trong quá trình phát triển ứng dụng của bạn.
source: viblo

Tìm Hiểu Quy Trình Hydration Trong React: Biến HTML Tĩnh Thành Tương Tác