Nâng cấp lên React 18 giúp cải thiện hiệu năng website của The New York Times

• Các kỹ sư của NYT rất coi trọng hiệu năng trang, SEO và việc duy trì công nghệ hiện đại
• Trong quá trình nâng cấp lên React 18, họ đã giải quyết một số vấn đề phát sinh và đạt được cải thiện hiệu năng đáng kể
• Các lợi ích chính của React 18: render mượt hơn nhờ Concurrent Mode, tự động batching và transition, server-side rendering và cập nhật streaming, v.v.
• Họ kỳ vọng việc nâng cấp sẽ cải thiện điểm INP (Interaction to Next Paint), chỉ số đo độ phản hồi của trang

Quy trình migration

• Thay thế thư viện test Enzyme đã không còn được khuyến nghị sử dụng bằng @testing-library/react
• Nâng cấp các dependency chính, type và test để phù hợp với React 18 nhằm tích hợp an toàn các tính năng mới của React 18
• Áp dụng các tính năng của React 18 bằng cách sử dụng các API mới là createRoot và hydrateRoot
• Sau lần triển khai đầu tiên, đã phát sinh vấn đề ngoài dự kiến với các "embedded interactive" tùy chỉnh
  • React 18 nhạy cảm với hydration mismatch hơn các phiên bản trước, nên phải chọn giữa việc sửa hydration mismatch hoặc remount embedded interactive ở phía client khi xảy ra hydration mismatch
  • Việc sửa an toàn mọi hydration mismatch là một bài toán khó

Trích xuất và thực thi thủ công script của embedded interactive

• Vì lý do bảo mật trình duyệt, các thẻ script được thêm qua prop innerHTML sẽ không tự động thực thi
• Để thực thi thẻ script đúng cách, cần trích xuất và loại bỏ chúng khỏi HTML tương tác, sau đó thêm lại vào đúng vị trí khi component rerender
• Một số script tương tác phải được tải lại theo đúng thứ tự khi thêm lại
  1. Thêm trước script manifest chứa dữ liệu tĩnh
  2. Thực thi bất đồng bộ các script có thuộc tính src
  3. Cuối cùng, thêm và thực thi script có chứa JavaScript thuần trong innerHTML

Cải thiện hiệu năng ngay lập tức

• Sau khi tích hợp khả năng kiểm soát chi tiết đối với mã embedded interactive, họ đã có thể triển khai React 18 một cách an toàn
• Sau triển khai, họ ghi nhận cải thiện hiệu năng gần như ngay lập tức, chẳng hạn điểm INP giảm khoảng 30%
• Nhờ tính năng tự động batching và concurrency của React 18, số lần rerender xảy ra trong lúc tải trang đã giảm khoảng một nửa

Hướng đi tiếp theo

• Họ sẽ tập trung khám phá các lợi ích tiềm năng của những tính năng mới như startTransition và React Server Components
• Mục tiêu chính là tiếp tục hạ điểm INP và cải thiện chức năng tổng thể
• Ưu tiên hàng đầu là bảo đảm hiệu năng ổn định và đáng tin cậy của phiên bản React đang sử dụng
• Dựa trên kết quả tại trang tin tức, họ sẽ theo đuổi những cải thiện hiệu năng tương tự ở các website khác
• Trước khi Google thay đổi thuật toán SEO, họ đã thành công đưa điểm INP ra khỏi vùng "kém" và không gặp tác động SEO tiêu cực nào