React 18へのアップグレードによるニューヨーク・タイムズのWebサイト性能向上

• NYTのエンジニアは、ページ性能、SEO、最新技術の維持を重視している
• React 18へのアップグレードを進める中でいくつかの問題を解決し、大きな性能向上を達成
• React 18の主な利点: Concurrent Modeによるよりスムーズなレンダリング、自動バッチ処理とトランジション、サーバーサイドレンダリングとストリーミング更新など
• アップグレードにより、ページ応答性の指標であるINP（Interaction to Next Paint）スコアの改善を期待

移行プロセス

• もはや使用されていないEnzymeテスティングライブラリを@testing-library/reactに置き換え
• React 18の新機能を安全に統合するため、主要な依存関係、型、テストをReact 18に合わせてアップグレード
• 新しいAPIであるcreateRootとhydrateRootを活用してReact 18の機能を適用
• 初回デプロイ後、カスタムの「埋め込みインタラクティブ」で予期しない問題が発生
  • React 18は以前のバージョンよりハイドレーション不一致に敏感なため、ハイドレーション不一致を修正するか、不一致発生時にクライアント側で埋め込みインタラクティブを再マウントするかを選ぶ必要があった
  • すべてのハイドレーション不一致を安全に修正するのは難しい課題だった

埋め込みインタラクティブスクリプトの手動抽出と実行

• ブラウザのセキュリティ上の理由により、innerHTML propを通じて追加されたスクリプトタグは自動実行されない
• スクリプトタグを適切に実行するには、インタラクティブなHTMLから抽出して削除した後、コンポーネントの再レンダリング時に正しい位置へ再追加する必要がある
• 一部のインタラクティブスクリプトは、再追加時に正しい順序でロードされる必要がある
  1. 静的データを含むマニフェストスクリプトを先に追加
  2. src 属性を持つスクリプトを非同期で実行
  3. 最後に、innerHTMLにバニラJavaScriptを含むスクリプトを追加して実行

即時の性能改善

• 埋め込みインタラクティブコードに対する細かな制御を組み込んだ後、React 18を安全にデプロイできた
• デプロイ後、INPスコアが約30%低下するなど、ほぼ即時の性能向上を確認
• React 18の自動バッチ処理と並行性機能により、ページロード中に発生する再レンダリングが半分程度に減少

今後の方向性

• startTransitionやReact Server Componentsのような新機能の潜在的な利点の探索に注力する予定
• INPスコアを継続的に下げ、全体的な機能を改善することが主な目標
• 現在使用中のReactバージョンで、安定的かつ信頼できる性能を保証することが最優先課題
• ニュースサイトでの結果をもとに、他のサイトでも同様の性能向上を目指す
• GoogleのSEOアルゴリズム変更前にINPスコアを「不良」区間から脱することに成功し、否定的なSEO結果は発生しなかった