트러블 슈팅: 페이지 로딩 속도 개선 - minumsa/carver-music GitHub Wiki

문제 상황

초기 데이터 조회 API 속도 - 리팩토링 전

데이터 조회 API 속도가 5초 이상 걸리는 이슈가 있었습니다. 초기 페이지 진입 시에만 그런 게 아니라, 전반적으로 느렸습니다. 코드를 살펴보고 검색해보면서 원인을 세 가지로 추론해봤습니다.

데이터 조회 API를 호출할 때마다 매번 MongoDB가 실행돼서
데이터 조회 API를 CSR 방식으로 호출해서
사이트를 Netlify에 배포했고, 무료 플랜을 사용해서

해결 과정

MongoDB 연결 캐싱

해결을 위해 가장 먼저 건드린 부분은 MongoDB 연동 관련 코드였습니다. 데이터 조회 API를 호출하려면 MongoDB와 연결하는 함수를 실행해야 하는데, 데이터를 조회할 때마다 해당 함수가 매번 실행되고 있다는 사실을 알게 되었습니다. 그래서 MongoDB 연결을 캐시해 불필요한 재연결을 방지하는 쪽으로 코드를 수정했습니다.

// mongodb.ts

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function connectMongoDB() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };
    cached.promise = mongoose.connect(getMongoDBUri(), opts).then(mongoose => {
      return mongoose;
    });
  }

  try {
    cached.conn = await cached.promise;
  } catch (e) {
    cached.promise = null;
    throw e;
  }

  mongoose.set("bufferCommands", false);

  return cached.conn;
}

SSR으로 초기 데이터 조회 API 호출

MongoDB 연결 캐싱으로는 유의미한 데이터 로딩 속도 변화가 없었기에 데이터 조회 API 호출 위치을 바꿔보기로 했습니다. 기존에는 클라이언트 컴포넌트의 최초 렌더링 시 useEffect 훅을 통해 데이터 조회 API를 호출해 초기 데이터를 가져오는 CSR 방식을 쓰고 있었는데, 서버 컴포넌트 자체에서 데이터 조회 API를 호출해 한번에 완전한 HTML을 생성하는 SSR 방식으로 교체했습니다.

결과는 성공적이었습니다. 페이지 로딩 속도가 5초에서 1.4초 정도로 줄어들었습니다.

초기 데이터 조회 API 속도 - SSR 방식으로 변경 후

Vercel에 프로젝트 재배포

그럼에도 속도를 더 줄여보고 싶었습니다. 다음으로 의심한 부분은 호스팅이었습니다. 카버뮤직의 경우 무료 웹 호스팅 서비스를 알아보다 별 고민 없이 Netlify에 배포했었는데, 검색해보니 저처럼 프로젝트를 Netlify에 배포하고 나서 로딩 속도 문제를 겪은 사람이 꽤 많았습니다. 어떤 사람은 로딩 속도 저하를 개선하기 위해 이미지를 배포 서버인 Netlify가 아닌 aws s3에 업로드해 가져오는 방식을 사용하기도 했습니다. 사이트의 IP를 추적해보니 아니나 다를까 ISP가 싱가폴로 되어 있었습니다.

카버뮤직 ISP 정보 - 리팩토링 전

그래서 사이트를 Vercel에 다시 배포했습니다. Next.js 자체를 Vercel에서 개발했기 때문에 둘은 호환이 잘 되고, Vercel은 이미지를 자동 최적화해 로딩 속도 향상에 도움을 준다고 합니다. 또한 Vercel은 프로젝트의 Function Region을 원하는 대로 설정할 수 있기에 이 부분을 한국으로 변경했습니다.

Next.js Function Region 설정 화면

그러자 페이지 로딩 속도가 약 0.03초로 바뀌었습니다.

초기 데이터 조회 API 속도 - Function Region 변경 후

배운 점

SSR을 통해 API를 서버 측에서 호출하고, 데이터 로딩 속도를 향상시키는 경험을 해보았습니다.
CDN(Content Delivery Network) region에 따라 데이터 로딩 속도가 저하될 수 있다는 사실을 알게 되었습니다.