frontend-react-performance

Installation
SKILL.md

React Performance

React와 Next.js의 실제 성능 병목을 찾아 최소 변경으로 개선한다. 일반적인 코드 스타일 리뷰는 frontend-fundamental-review를 사용한다.

진행

  • 프로젝트의 React/Next.js 버전, 렌더링 경계, 데이터 흐름, 기존 의존성을 먼저 확인한다.
  • 측정·로그·렌더링 흐름 등 확인 가능한 근거를 우선하고, 추측성 micro-optimization은 제안하지 않는다.
  • 동작, SEO, 접근성, 캐시 의미와 에러 처리를 유지한다.
  • 새 라이브러리는 기존 의존성으로 해결할 수 없고 효과가 분명할 때만 추가한다.

우선순위 기준

1. Waterfall 제거

  • 서로 독립적인 요청은 Promise.all 등으로 병렬화한다.
  • 필요한 분기 안에서만 await하고, 요청은 가능한 일찍 시작해 결과는 늦게 기다린다.
  • 서버 컴포넌트와 API route에서 순차 호출이 생기지 않는지 확인한다.
  • 스트리밍이 필요한 화면은 적절한 Suspense 경계를 검토한다.
Installs
25
First Seen
Sep 14, 2026