Vercel 504 timeout 에러

데브코스에서 최종 프로젝트로 진행한 책 스터디 지원 서비스 책모이 프로젝트를 완료하고 배포했었습니다

분명 잘 돌아가고 있었는데 갑자기 팀원분의 제보로 에러를 알게 되었습니다

에러 상황

SSR을 사용하는 스터디 상세 페이지로 이동할 때 굉장히 오랜 시간이 걸리고
이후 Vercel 504 타임에러가 발생합니다

원인을 찾는 과정

SSR을 사용하는 페이지는 처음 들어오는 홈 페이지와 스터디 상세 페이지 2곳입니다
그 중 스터디 상세 페이지만 어떨 때는 되고, 어떨 때는 안되서 백엔드, 프론트엔드 각자 원인을 찾아보고 잇었습니다

백엔드 분께서 오류가 발생할 때는 API 요청이 아예 오지 않는다고 하셨고, 될 때는 이상한 나라에서 요청을 보낸걸로 뜬다고 말해주신 덕분에 관련 내용을 유추할 수 있었습니다

504 vercel error를 통해 vercel의 SSR 요청이 길게 걸린다는 것을 알 수 있었고, 이게 나라 때문은 아닐까 의심하게 되었습니다

Vercel docs - Regions를 통해 지역 변경이 가능함을 확인하고, 백엔드 서버와 가까운 서울로 바꿨지만 해결되지 않았습니다
정확히는 서울로 바꿔도 이상한 나라에서 계속 요청이 오는것으로 확인되었습니다

Vercel 지역을 변경해서 성능이 좋아진 경우도 있지만 저는 해당이 되지 않았습니다

Next.js issue 중 프론트 배포를 변경했더니 속도가 올라갔다는 관련 글도 찾을 수 있었습니다

추정되는 원인

vercel을 처음 가입하면 2주간 Pro 계정을 사용할 수 있습니다
팀원 중 한분이 vercel을 처음 가입해서 그분 계정으로 배포를 진행했고, 2주가 끝나는 날이 데브코스 수료일 다음날이었습니다

자동으로 Pro에서 Hobby로 내려가면서 최대 요청 대기 시간이 10초로 줄어들었고
관련 내용으로 에러를 겪는 사람이 많기 때문에 원인으로 예상됩니다

해결책

배포 사이트를 옮겼습니다

vercel이 아니라 구글 클라우드 플랫폼을 통해서 배포했습니다
깃 레포를 연동하면 알아서 배포되던 vercel과 달리 클라우드에 명령어를 쳐야했지만 결과적으로 굉장히 빠른 속도를 얻었습니다

기존 vercel은 잘 동작할 때도 홈페이지와 스터디 상세 페이지로 이동하려고 해도
약 2초가량이 걸린 후 이동이 되어서 SSR 도입을 후회하고 있었는데
배포 사이트 변경으로 속도가 굉장히 개선되었습니다

참고

책모이 배포 링크
Vercel docs - Regions
kimseunggyu님 블로그 - vercel 배포시 렌더링 속도가 느린 이슈
Next.js issue - GetServerSideProps very slow in production #20507
Stack Overflow - Vercel serverless function has timed out error