Next.js + Vercel TTFB 문제

다른 방법으로도 해결했다. 최신글 참고 : https://doromo.vercel.app/post/23

로컬 환경에서는 애플리케이션의 TTFB(Time To First Byte)가 70~150ms정도 걸리는데, 배포 환경에서는 TTFB가 느리면 1500ms, 빠르면 400ms정도가 걸렸다. 그래서 최적화를 위해 여러가지를 시도해보았다.

프론트 서버 : Vercel

백엔드 서버 : AWS EC2 + Express

DB 서버 : MongoDB Atlas Free Cluster

Vercel Function Region 문제?? - X

당연히 이전에 설정한 Seoul로 설정되어있었다.

자바스크립트 번들링 문제?? - X

자바스크립트 번들링 크기가 커서 문제가 발생하는가 싶어서 번들링의 크기를 최소화했다.

일단 npm run build 를 해서 빌드해봤는데 /admin/newpost , /admin/newpost/[id] , /admin/newproject , /admin/newproject/[id] 의 First Load JS가 크게 나왔다.

그 이유는 어드민 페이지의 포스팅, 프로젝트 추가 및 수정 페이지에는 번들 크기가 큰 마크다운 뷰어인 ‘react-markdown’ 라이브러리가 들어있었기 때문이다.

어드민 페이지는 사용자를 위한 페이지가 아니므로 즉, 미리 로드할 필요가 없으므로 next/dynamic 을 이용해서 dynamic import를 사용했다.

import dynamic from "next/dynamic";

const MDViewer = dynamic(
  () => import("../../../components/Common/Markdown/MDViewer"),
  {
    ssr: false,
    loading: () => null,
  }
);
import dynamic from "next/dynamic";

const MDViewer = dynamic(
  () => import("../../../components/Common/Markdown/MDViewer"),
  {
    ssr: false,
    loading: () => null,
  }
);

결과 : First Load JS가 평균 431kB가 나오던 페이지가를 167kB까지 줄였다.

하지만 TTFB 문제는 해결되지 않았다.

MongoDB Atlas Free Cluster 문제? - X

MongoDB Atlas Free Cluster를 사용해서 EC2 Express ~ MongoDB Atlas까지 응답 시간이 오래 걸리나? 라고 생각해서 Express 서버의 EC2에 같이 MongoDB를 설치해 사용해보았다.

→ 27017번 포트에 MongoDB를 설치해 연결하고 기존 Atlas의 DB를 모두 백업해 불러왔다.

(설치 및 실행 방법은 스킵)

하지만 Express에서 DB 정보를 가져오는 속도가 기존과 차이가 없었다.

Vercel Serverless Function 문제? - O

사이트에 오랜만에 접근하면 TTFB가 1500ms정도가 걸리고, 계속 페이지를 새로고침하면 평균적으로 150ms정도로 걸렸다. 이 증상이 Serverless Function의 Cold Start와 유사해보였다.

그래서 Vercel의 Logs를 살펴 봤는데 runtime이 Serverless Function으로 작동해서 Execution Duration이 149ms 걸렸다.

runtime을 Edge Function으로 작동시키기 위해 /app/layout.tsx 와 /app/page.tsx 에 다음 코드를 추가했다.

Edge Function이란?

Edge Function은 Edge Network에 전세계적으로 배포되며 이를 트리거하는 사용자와 가장 가까운 지역에서 자동으로 실행할 수 있다. 콜드 부팅 기능도 없어 시작하는 데 추가 시간이 필요하지 않다.

네트워크를 통해 최대한 빠르게 상호작용해야 할 때 유용하다.

export const runtime = 'edge'
export const runtime = 'edge'

그 결과 TTFB가 80ms 정도 밖에 걸리지 않았다.

Vercel의 Hobby Tier는 Edge Middleware Invocation이 100만회로 제한이 있지만 개인 블로그 용도로는 차고 넘치기 때문에 이렇게 사용하기로 했다.