글을 시작하며

나는 그동안 NextJS를 그냥 막연히 'SSR이구나...' 하고 넘어가곤 했다.
그런데 최근에 친구에게 'Next는 기본적으로 SSG다' 라는 말을 듣고 '엥... 그게뭥미..?' 싶었고, 그래서 NextJS의 SSG와 SSR에 대해 알아보며 이 글을 쓰게 되었다.

NextJS의 작동 방식

먼저, NextJS의 작동 방식에 대해 먼저 알아보자.

NextJS는 렌더링을 할 때 기본적으로 pre-rendering을 해준다.
pre-rendering이란, 서버에서 각 페이지의 HTML 문서를 미리 생성하는 것을 말한다.
그리고 페이지가 로드되면, javascript 코드가 실행되어 이벤트들이 작동하게 된다. 이러한 과정을 Hydration 이라고 한다.

여기서 pre-rendering을 하는 방법으로 SSG와 SSR로 갈리게 된다.
이번엔 이 두 가지에 대해 각각 알아보자.

SSG (Static Site Generation)

이제 SSG에 대해 알아보자.

SSG 방식에서는 빌드 타임에 HTML 문서를 각 페이지별로 생성하고, 해당 페이지에 요청이 발생하면 미리 생성해 둔 HTML 문서를 반환한다.
그래서 SSG는 SEO에 유리하며, 속도가 아주 빠르다. 또한, 데이터의 변경이 적은 경우에 유리하다.
그리고 위에서 말했듯이, NextJS는 SSG를 기본으로 한다.

이제 NextJS에서 SSG를 사용하는 방법을 알아보자.

getStaticProps

getStaticProps는 외부 데이터를 가져올 때 사용된다.
다음은 getStaticProps의 사용예시이다.

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

getStaticPaths

getStaticPaths는 페이지 경로가 외부데이터에 연동된다.
다음은 getStaticPaths의 사용예시이다.

export const getStaticPaths = async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      },
    ],
    fallback: true,
  };
};
 
export const getStaticProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();
  
  return { props: { repo } };
};

SSR (Server Side Rendering)

마지막으로 SSR에 대해 알아보자.

SSR 방식에서는 SSG 방식과는 다르게 페이지에서 요청이 발생할 때마다 그에 맞는 HTML 문서를 생성하고, 반환한다.
즉, SSR 방식은 데이터의 변경이 잦은 경우에 유리하다.

이제 NextJS에서 SSR을 사용하는 방법을 알아보자.

getServerSideProps

getServerSideProps는 해당 페이지가 요청이 발생할 때마다 다시 요청된다.
다음은 getServersideProps의 예시이다.

export const getServerSideProps = async () => {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const repo = await res.json();

  return {
	props: {
      repo,
	},
  };
};

결론

SSG와 SSR은 둘다 pre-rendering 기법이라는 공통점이 존재한다.
그러나 이를 동적으로 수행하는지, 정적으로 수행하는지의 차이이다.
둘 다 각자의 장점과 단점이 있으니 자세히 알아보고 사용하자!