🐛 vercel 배포시 렌더링 속도가 느린 이슈
2022. 06. 19.
#이슈
#프로젝트
문제 파악
- Next.js 기반 프로젝트를 vercel 을 이용해서 배포하였는데 렌더링 속도가 1~2s 이상 걸리는 이슈가 있었다.
- getServerSideProps 에서 데이터를 요청 받고 렌더링을 할 때, 요청 시간이 매우 오래 거리는 이슈가 있었다.
series.json 는 getStaticProps 를, index.json 과 9.json 파일은 getServerSideProps 를 이용했다. 데이터를 요청했는데 각각 1.82s, 2.49s 가 나온 것을 알 수 있다. (요청할 때마다 이 정도의 속도가 나옴)이런 이유에 대해 구글링을 해보니, 해당 글 을 발견했다.
필자와 같은 문제를 가진 사람이 질문을 올렸고, 답변으로 서버를 배포한 곳에 프론트도 배포하니 속도가 개선되었다는 내용이었다.
해결 1
- 클라우드 환경을 생성해서 서버와 프론트를 같은 곳(한국 서버)에 배포
⇒ 적용하니 속도가 개선되었다.
series.json은 빌드할 때 배포된 파일이기 때문에 속도가 원래 빨랐고, (getStaticProps)
index.json과9.json파일이 문제 였는데 해당 사진을 보면 33ms, 23ms 로 줄어든 것을 확인할 수 있다.
이렇게 해서 문제를 해결했다. (그냥 프론트, 백엔드 서버를 같은 클라우드에 지정)
원인 파악
그렇다면 왜 이런 문제가 발생한 것일까??
확인 결과, vercel 에서 Serverless 배포 환경을 외국(캘리포니아)으로 기본 설정되어 있어 클라우드(한국)와 거리가 멀어서 발생한 이유였다.
nslookup seunggyu.vercel.app
해결 2 (추천)
확인 결과, 배포된 환경이 외국이라(캘리포니아) 유저가 사용하는 곳과 거리가 멀어서 발생한 이슈 였다.
vercel 에서 Serverless Function Region 을 제공하여 해당 값을 변경하면 빠르게 접근할 수 있다.
미국인 경우
요청 시간이 1~2s 걸린 것을 확인할 수 있다.
한국인 경우
요청 시간이 0.1 ~ 0.2s 정도인 것을 알 수 있다.
위의 해결1 로도 문제를 해결 할 수 있지만, vercel 을 계속 사용할 것이라면 vercel 에서 제공하는 Serverless Functions 를 이용하면 좋을 거 같다!