[삽질로그] Next.js(Vercel) + Strapi(Heroku) 504 에러 대처

(이 글은 2021년 7월 11일 기준 글이다.)

삽질요약👨‍🔧

스택: Next.js(Vercel) + Strapi - Postgres(Heroku) 
증상: 초기 접근시 504 에러가 뜸. (Serverless Function Timeout)
대처: 매번 서버에 요청해서 데이터를 가져오는 getServerSideProps에서 getStaticProps로 변경 후 revalidate 설정. 
(에러에 대한 근본적인 해결책이 아니라 다른 방법으로 대처한 것이기에 대처라고 썼다.) 

 

삽질구구절절

사이드 프로젝트를 하다가 한동안 다른 토이 프로젝트를 만지작거리다보니 사이드 프로젝트는 저어어 멀리 멀어져버렸고 손대기도 귀찮아졌다. 솔직히 말하면 해결해야 할 문제가 있었는데 해결책이 보이지 않아서 더 건들기가 싫었다. 그래도 도메인까지 사서 붙여놨는데... 이렇게 방치하긴 아까워서 다시 보기 시작했다. 

위에서 말했던 문제란 오랜만에 사이트에 접속하면 자꾸 504 에러를 뱉어내는 것이었다. 앱 자체에는 문제가 없는데 Serverless Function에서 타임아웃이라는 에러 문구를 보여준 것 같다. (캡쳐해놓은 것을 삭제했나보다...)
찾아보니 Vercel Hobby 버전은 응답을 받는데 10초이내로 제한이 걸려있다. 

구글링을 시작했다. 나와 비슷한 상황을 겪는 사람들이 몇몇 있었다. 뾰족한 해결책은 없어보였는데.. 그러다가 Reddit의 글을 읽게 되었다. 
댓글에 보니 heroku가 초기 시동을 하는 경우 응답을 받기까지 10초 이상의 시간이 걸려 Vercel이 중단될 수도 있다는 말이 있었다. heroku의 초기 시동 시간이 얼마나 걸리는지는 정확히 모르지만 꽤 일리가 있어보였다. 그래서 매번 서버에서 응답을 받지 않아도 화면에서 보여줄 수 있도록 getServerSideProps 메소드를 getStaticProps으로 변경하였다. 그리고 변경사항이 있을 경우 페이지를 재생성하도록 revalidate 값도 설정해주었다. 

이렇게 하니 504에러가 뜨는 문제는 해결이 되었다. 이 프로젝트를 진행하면서 Chrome lighthouse 점수를 올리기 위해서 초기 일부 데이터만 가져오고 스크롤을 내리면 로드하는 방식으로 구현을 해놓았는데 위의 에러를 해결하고자 초기 데이터만 getStaticProps로 가져오고 그 다음 데이터는 서버에서 요청하여 로드하니 시간이 좀 걸리게 되었다...(이러니 타임아웃이 뜨지...) 그래도 우선 504는 안뜬다. 개선해나갈 방법을 계속 찾아봐야겠다.

7월 12일 추가 내용

이러니 504가 들수밖에.... 똑같이 18개를 가져오는데 cold start인 경우 무려 28.97초가 걸린다. 이후에는 233ms🙄 
해결 방법은 Strapi를 Heroku가 아닌 다른 곳에 deploy하거나, getStaticProps로 변경해서 빌드 때 데이터를 가져오는 수 밖에 없는 것 같다. 

다른 해결방법을 아시는 분은 댓글로 알려주세요!✋