렌더링 방식을 결정하는 데이터 호출 메서드

데이터가 필요한 페이지에서 빌드시점에 HTML을 정적으로 생성하고 싶으면 getStaticProps, getStaticPaths를, 서버요청(페이지 접근) 때마다 서버측에서 HTML을 매번 동적으로 생성하고 싶으면 getServerSideProps 메서드를 사용하면 된다.

정적 생성

• 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML파일을 모두 갖고 있는 상태이다.
• 페이지를 요청할 때 서버에서 갖고 있던 해당 페이지의 HTML을 응답한다.
• Next.js에서 권장하는 렌더링 방식이며, 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 화면을 그리는 속도가 굉장히 빨라지고 불필요한 서버 요청이 줄어든다.

getStaticProps

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

export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  );
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 20,
  };
};

export const getStaticProps = async (context) => {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/photos/${id}`);
  const photo = await res.json();
  return {
    props: {
      photo,
    },
  };
};

위는 fake api를 이용하여 getStaticProps를 사용한 것이다. 이미 build 시점에 HTML을 만들어뒀기 때문에 서버의 데이터가 변하더라도 바뀐 내용이 적용되지 않는다. 하지만 revalidate 를 이용하여 일정 시간마다 새롭게 데이터를 받아 올 수 있다.
next에서 권장하는 메서드이다.

next는 페이지 폴더안 폴더명으로 라우팅을 자동으로 하는 장점이 있는데 이런 점을 이용해 id값을 이용해 상세 주소를 만드는 등의 행위를 할 때는 getStaticPaths가 필요하다.

getStaticPaths

export const getStaticPaths = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/photos?_start=0&_end=10`
  );
  const photos = await res.json();
  const ids = photos.map((photo) => photo.id);
  const paths = ids.map((id) => {
    return {
      params: { id: id.toString() },
    };
  });

  return {
    paths: paths,
    fallback: false,
  };
};

위와 같이 사용하여 params에 path값을 넣어주면 된다.

동적 생성

• 페이지 요청이 있으면 server side에서 api를 호출하고 데이터를 응답받아서 서버측에서 HTML을 완성시키고 클라이언트에 전달한다.
• 요청을 할 때마다 서버측에서 HTML을 만들 시간이 필요하기 때문에 HTML을 응답하는 시간이 오래걸릴 수 있다는 단점이 있다.
• 서버에 데이터를 요청 할 때마다 서버에 바뀐 점들이 바로 적용된다.

getServerSideProps

export const getServerSideProps = async () => {
  const res = await fetch(    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`);
   const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
};

위는 fake api를 이용하여 getServerSideProps를 사용한 것이다. 서버 데이터가 변할 경우 데이터를 요청 할 때 마다 바뀐 데이터가 바인딩 된다. 하지만 매번 새롭게 HTML을 만들기에 시간이 오래 걸리 수 있다.