Melhora de desempenho no site do New York Times com a atualização para React 18

• Os engenheiros do NYT dão grande valor ao desempenho das páginas, SEO e à manutenção de tecnologias atualizadas
• Ao realizar a atualização para o React 18, resolveram alguns problemas que surgiram e alcançaram um grande ganho de desempenho
• Principais benefícios do React 18: renderização mais suave com Concurrent Mode, batching automático e transições, além de renderização no lado do servidor e atualizações por streaming
• Com a atualização, esperavam melhorar a pontuação de INP (Interaction to Next Paint), métrica que mede a responsividade da página

Processo de migração

• Substituição da biblioteca de testes Enzyme, que não é mais usada, por @testing-library/react
• Atualização das principais dependências, tipos e testes para o React 18, a fim de integrar com segurança os novos recursos da versão
• Aplicação dos recursos do React 18 usando as novas APIs createRoot e hydrateRoot
• Após o primeiro deploy, surgiram problemas inesperados nos "embedded interactives" personalizados
  • O React 18 é mais sensível a incompatibilidades de hidratação do que as versões anteriores, então foi preciso escolher entre corrigir essas incompatibilidades ou remontar, no cliente, os embedded interactives quando elas ocorressem
  • Corrigir com segurança todas as incompatibilidades de hidratação era uma tarefa difícil

Extração e execução manual de scripts de embedded interactives

• Por motivos de segurança do navegador, tags <script> adicionadas via prop innerHTML não são executadas automaticamente
• Para executar corretamente as tags de script, foi necessário extraí-las e removê-las do HTML interativo e, em seguida, adicioná-las novamente no lugar correto durante a rerenderização do componente
• Alguns scripts interativos precisavam ser recarregados na ordem correta ao serem adicionados novamente
  1. Primeiro, adicionar o script de manifesto com os dados estáticos
  2. Executar de forma assíncrona os scripts com atributo src
  3. Por fim, adicionar e executar os scripts cujo innerHTML continha JavaScript puro

Melhorias imediatas de desempenho

• Depois de integrar um controle mais detalhado sobre o código de embedded interactives, foi possível fazer o deploy do React 18 com segurança
• Após o deploy, foi observada uma melhora de desempenho quase imediata, incluindo uma redução de cerca de 30% na pontuação de INP
• Graças ao batching automático e aos recursos de concorrência do React 18, a quantidade de rerenderizações durante o carregamento da página caiu aproximadamente pela metade

Próximos passos

• O foco será explorar os benefícios potenciais de novos recursos como startTransition e React Server Components
• Reduzir continuamente a pontuação de INP e melhorar a funcionalidade geral são os principais objetivos
• A principal prioridade é garantir um desempenho estável e confiável da versão do React atualmente em uso
• Com base nos resultados no site de notícias, a ideia é buscar melhorias de desempenho semelhantes em outros sites
• Antes da mudança no algoritmo de SEO do Google, conseguiram tirar a pontuação de INP da faixa "ruim", sem impactos negativos de SEO