[Next.js] getStaticPaths와 getStaticProps를 사용하여 정적 페이지 만들기

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Data Fetching: getStaticPaths | Next.js

getStaticPaths를 사용하여 빌드 타임에서 페이지 경로를 정적으로 생성해둔다.

 

ex) getStaticPaths

export const getStaticPaths: GetStaticPaths = async () => {
  const stores = (await import('../public/stores.json')).default;
  const paths = stores.map((store) => ({ params: { name: store.name } }));

  return { paths, fallback: false };
};

API로 받거나 혹은 JSON으로 저장 된(예시는 편의를 위해 JSON으로 저장된 데이터) 데이터를 확인한 뒤, 필요한 모든 경로에 대해서 페이지를 미리 Pre-Rendering 해두는 것이다.

 

getStaticPaths를 사용하기 위해선 getStaticProps 또한 사용해줘야 하는데, 예시를 보면

 

ex) getStaticProps

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const stores = (await import('../public/stores.json')).default;
  const store = stores.find((store) => store.name === params?.name);

  return { props: { store } };
};

데이터를 불러와 stores 변수에 담고, 위 getStaticPaths에서 params로 넘겨준 가게의 이름을 넘겨받아 각 데이터에서 필터 후 store 변수에 담아 최종적으로 렌더 할 페이지에 전달해 주는 역할을 수행한다.

 

하지만 빌드가 끝난 이후에 데이터베이스가 수정되는 상황이 있을 수 있다. 보통 getStaticProps는 이것을 revalidate 속성을 통해 해결하게 되는데, getStaticPaths 에서는 어떤식으로 해결 할 까?

 

getStaticPaths의 fallback

 

위 getStaticPaths의 예시 코드를 보면 return 안에 fallback: false 가 있는 것을 볼  수 있다. fallback은 true, false, "blocking" 세 값을 가질 수 있는데 

 

false

• 빌드 타임에 모든 경로를 만들고, 만약 찾을 수 없는 경로에 도달하면 404페이지를 띄운다.

 

true

• 빌드 타임에 모든 경로를 만들고, 찾을 수 없는 경로에 도달해도 바로 404 페이지를 띄우지 않고, getStaticProps 함수를 실행하기 때문에 업데이트 된 요청을 다시 불러올 수 있다.
• 아주 많은 라우터를 가진 서비스일 경우 미리 모든 경로를 pre-rendering 하지 않고, 사용자의 요청에 의해 경로를 만들 수 있고, 한 사람의 유저가 그 경로를 호출한다면 이후에 다른 유저가 호출 할 땐, 정적인 페이지를 받아 볼 수 있다.
• 렌더링 하는 컴포넌트 내에서 useRouter()의 isFallback 메서드를 통해 페이지가 생성되기 전을 핸들링 할 수 있다 (렌더링 될 동안 로딩바와 같이)

 

blocking

• 등록되지 않은 url에 접근했을 때, getStaticProps 함수를 호출하고 함수가 return될 때 까지 기다린다.
• true 속성과 같이 최초 접근자에게만 getStaticProps 함수를 실행하고, 이후 요청 부터는 똑같은 경로에 대해서 이미 pre-rendering 된 페이지를 제공한다.