Next.js 폼 입력이 느려졌을 때

폼 처리가 느려지는 문제는 애매할 수 있다. 폼 컴포넌트 자체가 무거운 건가, 입력 시 실행되는 유효성 검사가 무거운 건가, 아니면 네트워크 요청이 밀려 있는 건가. 처음부터 정답을 맞히려고 하면 오히려 확인 시간이 길어진다.

검색해서 온 상황 파악

같은 문제를 마주친 사람들의 해결 방법을 참고하되, 자신의 상황과 정확히 맞는지 확인한다. 폼이 느린 이유가 남의 프로젝트와 내 프로젝트에서 다를 수 있기 때문이다.

첫 번째 단서 - 공개 URL

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

페이지의 메타데이터가 제대로 생성되는가. 폼이 느린 것과 메타데이터는 관계없어 보일 수 있지만, 빌드 단계에서 여러 작업이 동시에 일어나면 서로 영향을 미칠 수 있다.

두 번째 단서 - HTML head

canonical과 다른 메타데이터가 제대로 설정되었는가. 폼 페이지가 동적으로 메타데이터를 생성한다면, 그 생성 과정이 느릴 가능성도 있다.

직접 확인하는 명령어

개발 환경에서 폼 입력의 반응 속도를 재본다. React DevTools의 "Highlight updates when components render" 옵션을 켜면 뭐가 자주 리렌더링되는지 볼 수 있다.

빌드 후 수정 전 확인

로컬 개발 환경에서와 배포 환경에서의 성능이 다를 수 있다. 빌드 후(프로덕션 모드) 폼이 얼마나 빠른지 확인한다. 개발 환경에서는 느려도, 최적화된 프로덕션 빌드에서는 빠를 수도 있다.

수정 후 재확인

폼 컴포넌트 하나만 수정한다. 입력 필드 하나를 단순하게 만들어보거나, 유효성 검사 로직을 임시로 빼본다. 각 수정 후에 실제 폼의 반응 속도가 얼마나 개선되는지 본다. 이렇게 하면 다음에 성능 문제가 나올 때도 빨리 찾을 수 있다.