https://may10.kr/
위 링크의 개인 프로젝트를 개발하다가 겪은 MongoDB의 connection limit 관련된 이슈를 해결한 방법에대해서 정리해볼려고한다.
평범하게 프로젝트를 개발하던 중
위의 이미지와 같이 DB의 connection이 exceeded 되었다는 메일이 엄청나게 오는것을 발견하였다.
처음에 이를 발견하고 일단 cluster의 데이터를 확인해보았으며 실제로 shared cluster의 경우 maximum connection이 500인데 500을 몇 번이나 터치하는것을 확인할 수 있었으며 실제로 이로인해서 DB가 터지기까지 하는것을 확인하였다.
해결하려고 db connection 관련된 코드를 찾아보았으나 코드상으로는 문제를 발견하지 못했으며 이로인해서 주말 내내 관련된 issue, docs들을 읽어보았고 connection 관련된 이슈가 getStaticPaths를 사용하였을 때 connection이 비정상적으로 증가한다는 증거를 확보할 수 있었다.
이 이슈를 해결하기 위해서 처음에는 기존 ISR 방식의 페이지에서 CSR 형태의 페이지로 변경하여 문제를 해결하는 방식을 선택하였다. 실제로 이 방식을 사용하여 SEO적인 부분을 좀 포기하여 문제를 해결하였지만 이로인하여 Open graph에서 페이지의 정보를 미리볼 수 없다는 점, 페이지 로딩이 느리다는 단점때문에 결국 롤백하여 근본적인 문제를 찾게되었다.
두 번째로는 DB의 connection개수가 많이 올라도 450~500 사이에서 머무는것을 확인하고 단순하게 M10 cluster를 돈을 주고 사용하는 방법을 사용하였으며 실제로 효과를 볼 수 있었다. 하지만 이 역시 근본적인 해결방법은 아니여서 계속 답답함이 남아있었다.
이후 게속 생각하다가 M10 cluster의 realtime analytics페이지에서 실시간으로 connection을 확인하면서 단서를 발견할 수 있었다. 유저가 메인 페이지에 바로 접근하였을 때 connection이 일정하게 증가하며 이는 새로고침하여도 따로 늘지 않는다는 점, 스크롤을 쭉 내리면 connection이 다시 비정상적으로 증가한다는 점이다.
이 단서들을 확인하여 몇 가지 테스트를 거친결과 NextLink의 prefetch기능때문에 페이지 안에 해당 dynamic페이지로 가는 link가 들어오면 해당 페이지를 prefetch하여 revalidate하게되고 nextJS가 의도한 바인지는 잘 모르겠지만 getStaticPaths를 사용한 dynamic페이지의 경우에는 모든 페이지에 새로운 connection을 연결하여 build를 한다는 점을 찾아내었다. 그리고 이로인해서 스크롤을 쭉 내리면 viewport내의 모든 dynamic페이지를 prefetch하고 이로 인해서 각 페이지를 모두 새 connection에 연결하여 설정해놓은 revlidate 주기(2분)마다 계속 build하여 발생한 문제였다. 실제로 이번 프로젝트의 총 페이지의 경우 dynamic페이지 포함 약 400페이지정도가 되었기에 기존에 비정상적으로 증가했을때의 최대 connection 약 450~500개와도 비슷한것을 확인할 수 있었다. 문제를 찾았기에 해결하는 방법은 아주 간단하였다. NextLink에서 prefetch를 false로 바꾸는 것이다. 그리고 실제로 비정상적인 connection 관련된 이슈는 바로 해결되었다.
NextJs에서 왜 Dynamic route를 통한 페이지를 빌드할 때 매 번 새로운 connection을 연결하는지에 대해서는 내부적인 동작을 잘 모르기에 확신할수는 없지만 이로 인해서 실제로 문제를 겪었으며 docs에도 별다른 설명이 없었기에 나 스스로는 이를 nextJS의 버그로 판단하였다. 그리고 실제로도 내키지 않는 해결방법인 prefetch를 끄는 방법을 사용해야 했다. 또한 이로인해서 사실상 2~3일이면 개발이 끝난 프로젝트에 대해 거의 일주일 넘게 시간을 들여 여러가지 노력을 해야했으며 이 문제를 해결하는동안 정말로 우울한 감정을 겪기까지 했다. 하지만 이를 해결하는 과정에서 DB에 관한 여러가지 문서들을 찾아보았기에 배운점도 많다고 할 수 있을 것 같다.
