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 경계를 검토한다.