Next.js로 정적생성(Static Generation) 구현_getStaticProps와 getStaticPaths 사용기

Issue

Next.js 프로젝트 도중 상품 상세 페이지를 정적생성(Static Generation)을 하기 위해서 getStaticProps와 getStaticPaths를 사용해 보기로 하였다.해당 기능을 구현하기 이전에 정적생성, getStaticProps, getStaticPaths가 어떤 의미를 지니고 있는지 간략하게 메모해 두고자 한다.

 

정적생성(Static Generation)은 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML 파일을 모두 갖고 있는 상태이다. 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 랜더링 속도가 빠르고 불필요한 서버 요청을 줄일 수 있다.

 

getStaticProps는 빌드 시점에 api를 호출하고 데이터를 응답 받아서 HTML을 완성하는 정적생성을 위한 메서드이다. 

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

 

getStaticPaths는 동적 라우트인 페이지이면서 정적으로 페이지를 생성하고 싶을 때 사용되는 메서드이다. 

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

 

Code

1) api 비동기 함수 분립

api fetch는 서버에서 데이터를 가져올 때마다 매번 로직을 짜줘야 하기 때문에 각각의 컴포넌트에 관련 로직을 정의해준 대신에 별도로 분립하였다.

📦 api
 ┣ 📜 contacts.api.ts
 ┗ 📜 items.api.ts // 해당 컴포넌트 내에서 API 통신을 위한 비동기 함수 정의

해당 컴포넌트 내에서 async/await 함수를 통해 비동기 로직을 처리해주고 서버에서 받아 온 데이터의 타입은 인터페이스을 통해 정의해주었다.

import axios from 'axios';

export interface ItemInfoType {
    id:              number;
    name:            string;
    originalPrice:   number;
    minSellingPrice: number;
    ncSellingPrice:  number;
    warning:         string;
    discountRate:    number;
    imageUrl:        string;
    options:         Option[];
    brand:           string;
}

export interface Option {
    expireAt: Date;
    count: number;
    sellingPrice: number;
}

export async function getItemInfo(paramsId: string | string[] | undefined) {
    const request = await axios.get(`https://(..URL)/${paramsId}`);
    const { data: { conItem } } = request;
    
    // 원하는 데이터를 랩핑하기 위해 서버에서 받아 온 데이터를 디스트럭쳐링 할당
    const { id, name, originalPrice, minSellingPrice, ncSellingPrice, warning, discountRate, imageUrl, options, } = conItem;
    
    const itemInfo = { id, name, originalPrice, minSellingPrice, ncSellingPrice, warning, discountRate, imageUrl, options, brand: conItem["conCategory2"].name };
    
    return {
        itemInfo
    }
}

2) pages 폴더 내에서 getStaticProps 사용

pages 폴더에선 Next.js의 파일 기반 라우팅 기능을 담당하는 디렉토리이다. 폴더 혹은 파일 이름을 지정하여 컴포넌트를 만들면 이에 해당하는 router가 자동으로 지정된다.

📦items
 ┗ 📂[id] // query parameter
 ┃ ┗ 📜index.tsx

해당 컴포넌트 내에서 api 함수를 호출하여 미리 각 상품들에 대한 상세 정보 리스트를 서버에서 불러와 HTML을 구성함으로써, 정적생성이 구현되도록 하였다.

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params && params.id;
  const { itemInfo } = await getItemInfo(id);

  if (!itemInfo) {
    return {
      notFound: true,
    };
  }

  return {
    props: itemInfo,
  };
};

또한 서버에서 가져 올 상품 데이터들은 query parameter id값으로 동적 라우팅이 되기 때문에 상품 리스트에 해당하는 모든 상품들의 상세 페이지를 가져오기 위해서 getStaticPaths도 같이 사용해야 했다.

(getStaticProps에 인자로 받는 params가 query parameter id값에 해당한다)

 

이를 위해 다음과 같이 상품 카테고리에 대한 상품 리스트 데이터를 서버에서 받아오고, 해당 상품 리스트 데이터에서 각 상품의 상세 페이지에 해당하는 고유 id값을 추출하여 paths에 적재하여 반환하였다.

export const getStaticPaths: GetStaticPaths = async () => {
  const {
    data: { conCategory1s },
  } = await axios.get('https://(...URL)');
  const categoriesID = conCategory1s.map(({ id }: any) => id);
  let paths: any = [];

  for (const id of categoriesID) {
    const { data } = await axios.get(`https://(...URL)`);
    const {
      conCategory1: { conCategory2s },
    } = data;
    let conItems = [];
    for (let i = 0; i < conCategory2s.length; i++) {
      conItems = conCategory2s[i].conItems;

      const conItemsID = conItems.map(({ id }: any) => ({
        params: { id: id.toString() },
      }));
      paths = paths.concat(conItemsID);
    }
  }

  return { paths, fallback: false };
};

마지막으로 getStaticProps에서 반환한 값을 랜더링하고자 하는 컴포넌트 내에서 다음과 같이 props로 전달 받아 정적생성 기능을 마무리하였다.

const Items: React.FC<ItemInfoType> = (itemInfo: ItemInfoType) => {
  return (
    <ItemsTemplate>
      <ItemsForm itemInfo={itemInfo} />
    </ItemsTemplate>
  );
};

 

회고

결과적으로 각 상품들에 대한 상세 페이지를 정적생성 방식을 통해 클라이언트 측에서 랜더링하는 데에 기능 상으로 성공하였다.하지만 CSR 방식으로 랜더링하였을 때보다 랜더링 속도가 현저히 느린 성능 상의 문제가 있었다.

 

랜더링 성능을 높이기 위해서 단순히 서버 측에서 페이지를 구성하는 SSR 방식이, 정답만은 아니라는 것을 해당 프로젝트에서 확인해 볼 수 있었다.

 

또한 쇼핑물과 같이 커머스 기반의 서비스 내에서는 매일 새로운 상품을 보여주기 위하여 상품 목록 api를 호출해서 상품 데이터를 받아와야 하는데, 만약 빌드 시점에 정적으로 HTML을 생성해버리면 유동적으로 데이터를 받아오지 못하는 문제가 있기 때문에, 관련 메서드들을 사용할 경우에는 신중히 사용해야 함을 재확인할 수 있었다.