# React 18 업그레이드로 인한 뉴욕타임스 웹사이트 성능 향상

> Clean Markdown view of GeekNews topic #15725. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=15725](https://news.hada.io/topic?id=15725)
- GeekNews Markdown: [https://news.hada.io/topic/15725.md](https://news.hada.io/topic/15725.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-07-07T10:03:01+09:00
- Updated: 2024-07-07T10:03:01+09:00
- Original source: [open.nytimes.com](https://open.nytimes.com/enhancing-the-new-york-times-web-performance-with-react-18-d6f91a7c5af8)
- Points: 12
- Comments: 0

## Summary

뉴욕타임스는 React 18 업그레이드를 통해 페이지 성능과 SEO를 크게 향상시켰으며, 특히 INP 점수가 약 30% 감소하는 등 즉각적인 성능 개선을 확인했습니다. 업그레이드 과정에서 발생한 하이드레이션 불일치 문제를 해결하고, 새로운 API와 기능을 안전하게 통합하여 사용자 경험을 개선했습니다. 앞으로도 startTransition 및 React Server Components와 같은 새로운 기능을 탐색하며, 지속적으로 성능을 최적화할 계획입니다.

## Topic Body

- 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에 바닐라 자바스크립트가 포함된 스크립트 추가 및 실행  
  
### 즉각적인 성능 개선  
  
- 임베디드 인터랙티브 코드에 대한 세밀한 조작을 통합한 후 React 18을 안전하게 배포할 수 있었음   
- 배포 후 INP 점수가 약 30% 감소하는 등 거의 즉각적인 성능 향상을 확인함  
- React 18의 자동 배치 및 동시성 기능으로 인해 페이지 로드 중 발생하는 재렌더링이 절반 가량 감소함  
  
### 앞으로 나아갈 방향  
  
- startTransition 및 React Server Components와 같은 새로운 기능의 잠재적 이점 탐색에 중점을 둘 예정  
- INP 점수를 지속적으로 낮추고 전반적인 기능을 개선하는 것이 주요 목표  
- 현재 사용 중인 React 버전의 안정적이고 신뢰할 수 있는 성능 보장이 최우선 과제  
- 뉴스 사이트에서의 결과를 바탕으로 다른 사이트에서도 유사한 성능 향상을 추구함  
- Google의 SEO 알고리즘 변경 전 INP 점수를 '불량' 구간에서 벗어나는 데 성공하고, 부정적인 SEO 결과는 발생하지 않음

## Comments



_No public comments on this page._