Peningkatan Kinerja Situs Web The New York Times Berkat Upgrade ke React 18

• Insinyur NYT sangat menghargai performa halaman, SEO, dan pemeliharaan teknologi terbaru
• Saat melakukan upgrade ke React 18, mereka menyelesaikan beberapa masalah yang muncul dan mencapai peningkatan performa yang besar
• Keunggulan utama React 18: rendering yang lebih mulus berkat Concurrent Mode, batching dan transisi otomatis, server-side rendering dan pembaruan streaming, dan lain-lain
• Melalui upgrade ini, mereka berharap dapat meningkatkan skor INP (Interaction to Next Paint), metrik yang mengukur responsivitas halaman

Proses migrasi

• Mengganti library pengujian Enzyme yang sudah usang dengan @testing-library/react
• Meng-upgrade dependensi utama, tipe, dan pengujian agar sesuai dengan React 18 untuk mengintegrasikan fitur-fitur baru React 18 dengan aman
• Menerapkan fitur React 18 dengan memanfaatkan API baru createRoot dan hydrateRoot
• Setelah deployment awal, muncul masalah tak terduga pada "embedded interactive" kustom
  • React 18 lebih sensitif terhadap ketidakcocokan hidrasi dibanding versi sebelumnya, sehingga mereka harus memilih antara memperbaiki ketidakcocokan hidrasi atau me-remount embedded interactive di sisi klien saat ketidakcocokan hidrasi terjadi
  • Memperbaiki semua ketidakcocokan hidrasi dengan aman merupakan tantangan yang sulit

Ekstraksi dan eksekusi manual skrip embedded interactive

• Demi keamanan browser, tag skrip yang ditambahkan melalui prop innerHTML tidak akan dijalankan secara otomatis
• Agar tag skrip dapat dijalankan dengan benar, skrip harus diekstrak dan dihapus dari HTML interaktif, lalu ditambahkan kembali ke posisi yang tepat saat komponen dirender ulang
• Beberapa skrip interaktif harus dimuat kembali dalam urutan yang benar
  1. Menambahkan terlebih dahulu skrip manifes yang berisi data statis
  2. Menjalankan secara asinkron skrip yang memiliki atribut src
  3. Terakhir, menambahkan dan menjalankan skrip yang berisi vanilla JavaScript di dalam innerHTML

Peningkatan performa yang langsung terasa

• Setelah mengintegrasikan kontrol yang lebih rinci terhadap kode embedded interactive, mereka dapat melakukan deployment React 18 dengan aman
• Setelah deployment, mereka mengonfirmasi peningkatan performa yang nyaris langsung, termasuk penurunan skor INP sekitar 30%
• Berkat fitur batching otomatis dan konkurensi di React 18, rerender yang terjadi selama pemuatan halaman berkurang hampir setengahnya

Arah selanjutnya

• Mereka berencana berfokus pada eksplorasi potensi manfaat fitur baru seperti startTransition dan React Server Components
• Tujuan utamanya adalah terus menurunkan skor INP dan meningkatkan fungsionalitas secara keseluruhan
• Prioritas tertinggi adalah menjamin performa yang stabil dan andal dari versi React yang saat ini digunakan
• Berdasarkan hasil di situs berita, mereka juga mengejar peningkatan performa serupa di situs lain
• Sebelum perubahan algoritme SEO Google, mereka berhasil mengangkat skor INP keluar dari kategori "buruk", dan tidak terjadi dampak SEO negatif