Mejora del rendimiento del sitio web de The New York Times gracias a la actualización a React 18

• Los ingenieros de NYT dan un alto valor al rendimiento de la página, el SEO y mantenerse al día con la tecnología más reciente
• Durante la actualización a React 18 resolvieron varios problemas y lograron una gran mejora de rendimiento
• Principales beneficios de React 18: renderizado más fluido gracias a Concurrent Mode, batching automático y transiciones, renderizado del lado del servidor y actualizaciones por streaming, entre otros
• Esperaban mejorar la puntuación de INP (Interaction to Next Paint), una métrica que mide la capacidad de respuesta de la página

Proceso de migración

• Reemplazaron la biblioteca de pruebas Enzyme, que ya no se usa, por @testing-library/react
• Para integrar de forma segura las nuevas funciones de React 18, actualizaron las dependencias principales, los tipos y las pruebas para adaptarlos a React 18
• Aplicaron las funciones de React 18 usando las nuevas API createRoot y hydrateRoot
• Después del primer despliegue, surgieron problemas inesperados en los "embedded interactives" personalizados
  • React 18 es más sensible a los hydration mismatches que las versiones anteriores, por lo que tuvieron que elegir entre corregirlos o volver a montar del lado del cliente los embedded interactives cuando ocurrieran
  • Corregir de forma segura todos los hydration mismatches era una tarea difícil

Extracción y ejecución manual de scripts de embedded interactives

• Por razones de seguridad del navegador, las etiquetas <script> agregadas mediante la prop innerHTML no se ejecutan automáticamente
• Para ejecutar correctamente las etiquetas <script>, había que extraerlas y quitarlas del HTML interactivo, y luego volver a agregarlas en la ubicación correcta cuando el componente se rerenderizara
• Algunos scripts interactivos debían cargarse en el orden correcto al volver a agregarse
  1. Primero agregar el script de manifiesto que contiene datos estáticos
  2. Ejecutar de forma asíncrona los scripts con atributo src
  3. Por último, agregar y ejecutar el script que contiene JavaScript vanilla en innerHTML

Mejora inmediata del rendimiento

• Tras integrar un control detallado sobre el código de embedded interactives, pudieron desplegar React 18 de forma segura
• Después del despliegue confirmaron una mejora de rendimiento casi inmediata, incluyendo una reducción de alrededor del 30% en la puntuación de INP
• Gracias al batching automático y a las funciones de concurrencia de React 18, los rerenderizados durante la carga de la página se redujeron aproximadamente a la mitad

Próximos pasos

• Planean enfocarse en explorar los beneficios potenciales de nuevas funciones como startTransition y React Server Components
• El objetivo principal es seguir bajando la puntuación de INP y mejorar la funcionalidad general
• La prioridad número uno es garantizar un rendimiento estable y confiable de la versión de React que usan actualmente
• Con base en los resultados en el sitio de noticias, buscarán mejoras de rendimiento similares en otros sitios
• Antes de los cambios de Google en su algoritmo de SEO, lograron sacar la puntuación de INP de la zona "mala" y no se produjeron resultados negativos en SEO