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