NEXT.JS를 사용해서 개발을 진행하고 성능 확인을 위해서 Lighthouse 검사를 돌렸는데
별거 안했는데 성능이 좋아서 개발 실력이 좋아졌다고 생각했는데 어림도 없었다.
자세히 보이 오류로 인해 결과가 불완전한 것이었다.
Lighthouse 실행에 영향을 미치는 문제가 발생했습니다.
라는 오류가 나왔다.
특정 컴포넌트가 너무 커서 그런가 싶어서 컴포넌트를 지워도 보고 Dynamic Import 으로 인해서
검사 중 컴포넌트가 렌더링되서 발생한 문제인지 Static Import로 변경도 해봤는데 여전히 오류가 발생했다.
원인을 찾기 위해서 현재 페이지를 다시 한번 검토를 해보는데 특이한 부분이 있었다.
<Link href="/detail">상세 페이지</Link>흔하게 사용하는 Link 컴포넌트이다.
하지만 다른 점이 바로 현재 라우팅에서 detail 페이지는 구현되지 않았다는 점이다.
Lighthouse는 페이지 링크가 존재하면 해당 페이지 실제로 존재하는지 들어가보는 것 같은데
페이지가 없어서 위와 같은 오류가 발생했던 것이다.
링크를 지워서 다시 검사하니 해당 오류가 발생하지 않고 정상적으로 검사 결과가 나오는 것을 확인했다.
반응형
