[next.js] getServerSideProps 사용전에 고민해보기

SangBooom·2023년 1월 8일
5
post-custom-banner

⚠️ 아직 정리중인 글입니다!

페이지에서 getServerSideProps라는 함수를 export 하면 next.js에서 getServerSideProps에서 반환한 데이터를 사용하여 각 요청에 대해 페이지를 미리 렌더링한다.

언제 실행되는가?

  • gssp가 적용된 페이지 url을 주소창에 입력하여 직접 요청시 gssp가 실행되고 페이지는 반환된 props들과 함께 pre-rendering 된다.
  • 페이지 전환(next/router, next/link)을 통해 페이지를 요청하면 next.js는 api 요청을 gssp를 실행하는 서버에 보낸다.

https://nextjs.org/docs/going-to-production#caching

https://velog.io/@chltjdrhd777/Next.js-Data-fetchinggetServerSideProps

cache miss면 origin server에서 가져온다. 그니까 느리다.

https://vercel.com/docs/concepts/edge-network/caching?utm_source=next-site&utm_medium=docs&utm_campaign=next-website

https://www.cloudflare.com/ko-kr/learning/cdn/glossary/origin-server/

+ getStaticProps는 어떻게 실행되는가?

  • getStaticProps 로 빌드 시간에 페이지가 pre-render 될 때, Next.js는 HTML 파일 뿐만 아니라 JSON 파일을 만들어서 실행중인 getStaticProps에서 반환시킨다. 이 JSON 파일이 클라이언트 사이드 라우팅에서 사용될 수 있다.
    getStaticProps로 pre-render된 페이지를 탐색할 때, Next.js는 이 JSON 파일을 패치하여 페이지 컴포넌트에 props로 보낸다.
    이는 클라이언트 사이드 트랜지션은 getStaticProps를 부르지 않으며 오직 추출된 JSON만 사용한다는 의미이다.

    https://devowen.com/465

getStaticProps는 페이지 이동간에 호출되지 않는다. 다만, ISR 일때는 호출한다.

serverless function 지역 (x-vercel-id)

https://vercel.com/docs/concepts/edge-network/headers
https://vercel.com/docs/concepts/functions/serverless-functions/regions

기본적으로 Vercel은 IAD1(워싱턴 D.C) 지역에 배포를 할당하여 서버리스 기능을 미국 동쪽에 위치한 데이터 센터와 지리적으로 가까운 곳에 배치한다.
배포 환경에 여러 영역이 있는 경우 첫 번째 영역이 사용자에게 가장 가깝고 두 번째 영역이 데이터 센터에 배포된다.
지역이 없으면 지역 미스로 간주된다. 이러한 경우 가격 계획에 관계없이 지역을 IAD1로 변경한다.

아래는 next13 playground로 속도 차이를 비교해보았다.

serverless function regions: iad1(워싱턴 D.C, default config)

serverless function regions: icn1(인천)

확연하게 속도 차이가 난다.

속도

serverless function의 실행 속도 높히는 방법
pro pricing을 사용하면서 40달러씩 내면된다
https://vercel.com/docs/concepts/limits/overview#additional-resources

Serverless Function의 GB-Hrs가 뭐지?
https://github.com/vercel/vercel/discussions/5384

https://github.com/vercel/vercel/discussions/7961

🔥🔥 뤼튼 대화한 내용이랑 깃헙 gssp test pr 이랑 내용 취합해서 정리하기 🔥🔥

gsp revalidate 타이밍 및 동작에 대하여 설명

https://mytutorials.tistory.com/317

next.js serverless function 사용 참고 레퍼런스 목록 정리

카카오 페이지, 카카오 스테이지, 카카오 웹툰(gip)

인프런 랠릿(채용 페이지)
마켓컬리(gssp)
크몽(ssp)
콴다과외(gssp)
커리어리 피드(gssp)

내용 및 생각 정리

vercel에서 lambda 함수를 호출(getServersideProps 호출)했을 때 cold start가 발생하면 TTFB가 약 1~3초 정도 걸린다.
첫 호출 이후 일정 시간동안 warm state 상태가 되어 로딩 지연이 전보다 훨씬 적어지고 굉장히 빠르다. 이후 일정 시간이 지나면 cold state로 변하게 되고 lambda 함수를 호출(getServersideProps 호출)을 하게 되면 또 1~3초 정도의 로딩 지연이 발생하게 된다.

이를 해결하기 위해선 getServersideProps를 호출하는 aws lambda를 조작할 수 있어야 될 것 같다.

lambda 함수가 warm state를 유지할 수 있도록 계속해서 핑을 보내거나
vercel이 아닌 aws로 클라우드 서비스를 이관하여 같은 VPC 내에서 물리적, 논리적 거리를 최대한 가까이 두고 동작할 수 있도록 설정하면 훨씬 빠르게 사용할 수 있을 것 같다.

profile
끊임없이 떨어지는 물방울이 바위를 뚫는다
post-custom-banner

0개의 댓글