getStaticProps와 getStaticPaths란?

 

 

Next.js는 Static Site Generation (SSG, 정적 사이트 생성) 을 합니다.

SSG는 프로젝트 빌드 시점에 미리 사이트를 만들어 놓는 것인데요.

이렇게 미리 사이트를 만들어 놓으면 클라이언트 측에서 페이지에 접속했을 때 서버 측에서는 빌드 시 미리 생성해두었던 페이지를 클라이언트로 전달하고,

클라이언트에서는 서버 측에서 받은 페이지를 그대로 뷰에 띄워주기만 하면 되기 때문에 페이지 로딩 속도가 빨라집니다.

getStaticProps와 getStaticPaths는 이 SSG를 하기 위한 두 가지 방법입니다.

 

 

 

getStaticProps

 

 

getStaticProps는 빌드 시에 데이터를 가져와서 페이지를 생성합니다.

 

import type { InferGetStaticPropsType, GetStaticProps } from 'next';

type Repo = {
  name: string;
  stargazers_count: number;
};

export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();
  return { props: { repo } };
}) satisfies GetStaticProps<{
  repo: Repo;
}>;

export default function Page({ repo }: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count;
}

 

코드의 export const getStaticProps 함수를 보면, fetch로 가져온 값을 props로 전달해 페이지로 생성해주고 있습니다.

이 props는 페이지 컴포넌트로 전달되는 정보라 클라이언트 측에서 접근할 수 있으므로 민감한 정보는 다루지 않도록 합시다.

다만 앞서 말했듯 빌드 시점에 생성되는 페이지이기 때문에 페이지의 데이터가 자주 변경되지 않는 경우에 사용합니다.

 

 

 

getStaticPaths

 

 

getStaticPaths는 동적 라우팅을 사용하여 정적으로 사용할 페이지 경로들을 미리 정의합니다.

pages/posts/[id].js 와 같은 이름으로 다음 페이지를 생성합니다.

 

import type { InferGetStaticPropsType, GetStaticProps, GetStaticPaths } from 'next';

type Repo = {
  name: string;
  stargazers_count: number;
};

export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // See the "paths" section below
    ],
    fallback: true, // false or "blocking"
  };
}) satisfies GetStaticPaths;

export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();
  return { props: { repo } };
}) satisfies GetStaticProps<{
  repo: Repo;
}>;

export default function Page({ repo }: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count;
}

 

생성할 페이지를 getStaticPaths의 path 블럭에 미리 정의합니다.

위 코드에서는 next 페이지를 미리 생성해놓았기 때문에 /posts/next 경로로 접근하면 해당 페이지를 볼 수 있겠죠?

getStaticPaths는 여러 개의 페이지를 미리 만들어 두어야 할 경우 (블로그 글, 상품 페이지) 에 유용하게 사용합니다.

물론 이 경우에는 서버에서 받아온 고유 값 (id 등) 을 map을 사용해서 path로 넣어주어야 할 겁니다.

 

 

 

 

 

참고자료

참고자료1

참고자료2

참고자료3

참고자료4