Next.JS - 외부 REST API 부하 문제에 부딪히다

 

Next.JS로 개발하던 중 공공데이터 API를 사용하여 받은 데이터를 컴포넌트로 출력하는데 테스트를 하면서 가끔 로딩이 길거나 불러오지 못했다는 에러를 반환하는 문제가 있었습니다

 

처음엔 코드가 잘못된 걸로 인지하고 디버깅하면서 역추적을 해보았는데 결론은 모두 정상인 상태..

뭐가 문제지?.. 고민하다가 개발할 땐 저장할 때마다 렌더링을 다시 하는데 이 횟수가 텀이 짧을 때마다 발생한다는 규칙을 발견!

 

 

특정 지역의 데이터를 불러오는 API를 계속 불러오고 있었습니다.. 물론 전체 지역을 불러오는 게 아닌 관악구 한 곳의 데이터만 계속 불러오게 됐는데 이제 주기가 너무 짧으면 에러가 발생하거나 무한 로딩이 걸려버리는 문제가 있었고

 

Next.JS는 이런 문제에 대해서 빛을 발휘합니다 최초 서버가 구동될 때 캐시로 각 지역구의 API 반환값을 갖고 있게 하고 서버에서 해당 API와 관련된 컴포넌트를 보내면 될 것 같은데?...

 

그러면 서버가 최초 실행될 때 각 API를 한 번씩만 불러오면 다시 불러올 필요가 없고 (최신화에 대한 문제는 텀을 둬 이용자가 적은 새벽시간에 다시 요청을 보낸다거나 데이터 갱신 필요성에 따라 주기를 정하면 될 것 같습니다)

정보 출력 웹페이지 성능도 향상하고 안정성도 보장할 수 있는 굉장히 완벽한 방법!

 

 

머릿속으론 이렇게 생각하고 아직 구현은 못했습니다..

구현은 다음 글에서 작성하겠습니다