Next.js 상세 페이지 로딩 속도 87% 개선으로 조회수 30% 더 얻기

페이지 크기로 인한 로딩 속도 저하 문제

어느날 회사 홈페이지가 너무 느려서 로컬 서버를 켜서 테스트해 보니 충격적인 결과가 나왔다.

무려 상세페이지 로딩에 1초 이상 소요되고 있던 것이다. 심지어 SSG를 이용해 미리 생성해 둔 정적 페이지인데도 말이다.

Content Download 속도가 차지하는 비중이 큰 점으로 보아 전달하는 페이지 크기 자체가 너무 큰 건 아닌지 의심해 보았다.

실제로 정적 파일이 위치한 .next/server/app 폴더를 확인해 보니, 페이지 하나의 크기가 무려 4MB가 넘었다.

원인은 클라이언트 컴포넌트의 매개변수

결국 문제는 클라이언트 컴포넌트에 그대로 넘긴 연관 포트폴리오 리스트 객체가 원인이었다. 예를 들어 아래와 같은 코드 때문이다.

"use client"

type Props = {
  id: string;
  title: string;
  description: string;
  createdAt: Date;
}

export function RelatedPortfolioSection({ portfolios }: Props) {
  return (
    <ol>
      {
        portfolios.slice(0, 10).map((portfolio) => <li key={portfolio.id}>{portfolio.title}</li>);
      }
    </ol>
  )
}

export async function PortfolioPage() {
  const relatedPortfolios = await fetchPortfolios(); // 60개 이상의 포트폴리오 객체
  
  return <RelatedPortfolioSection portfolios={relatedPortfolios} />
}

만약 위 예시에서 RelatedPortfolioSection 컴포넌트가 "use client"를 쓰지 않은 서버 컴포넌트였다면 문제가 생기지 않는다. 왜냐하면 포트폴리오 객체에 무엇이 담겨 있든 서버에서 미리 10개 객체의 portfolio.title 속성만 가지고 렌더링한 다음 페이지를 내려주기 때문이다.

하지만 주어진 코드는 "use client"를 쓴 클라이언트 컴포넌트이기 때문에 말이 다르다. 서버는 클라이언트측에 일단 60줄이든 100줄이든 포트폴리오 리스트 객체를 그대로 넘겨준다. 그렇다면 포트폴리오 객체 하나에 여러가지 속성이 담겨 있어 그 크기가 클 수록, 또 포트폴리오 리스트 길이가 길수록 클라이언트가 다운로드해야 하는 페이지 크기는 커지게 된다.

아무래도 처음에는 포트폴리오가 얼마 없고, 포트폴리오 객체 자체가 크지 않아서 괜찮았지만, 고도화 과정에서 포트폴리오가 많아지고 객체 크기도 점점 커졌기 때문에 페이지 크기가 기하급수적으로 늘어나고 로딩 속도가 둔화된 것 같다.

클라이언트 측이 이용할 정보만 내려주기

따라서 이 문제는 매개변수에 최소한의 데이터, 그러니까 반드시 사용해야만 하는 정보만을 미리 필터링해서 내려주는 방법으로 해결할 수 있다.

"use client"

type Props = {
  id: string;
  title: string;
}

export function RelatedPortfolioSection({ portfolios }: Props) {
  return (
    <ol>
      {
        portfolios.map((portfolio) => <li key={portfolio.id}>{portfolio.title}</li>);
      }
    </ol>
  )
}

export async function PortfolioPage() {
  const relatedPortfolios = await fetchPortfolios();
  
  const reletedPortfoliosForClient = relatedPortfolios.slice(0, 10).map(({ id, title }) => ({ id, title }));
  
  return <RelatedPortfolioSection portfolios={relatedPortfoliosForClient} />
}

관건은 클라이언트가 최초에 전달받는 페이지 크기를 줄이는 것이다. 한번 작업을 하는 김에 모든 클라이언트 컴포넌트에 이를 적용해 주었다.

그 결과, 같은 페이지의 크기는 80% 이상 감소했다.

실제 환경에서 테스트한 결과, 다시 50ms 이내로 페이지를 제공할 수 있게 되었다.

페이지 이동이 빨라진 덕분에 예상대로 지난 2주 간 조회수가 30% 상승하는 효과가 있었다. 장기적으로는 SEO에도 긍정적인 영향을 줄 수 있으므로 트래픽 상승도 기대하고 있다.