[TIL] 10.15 next.js getIntialprops, getServerSideprops, getStaticProps 의 차이점

이전에 getServerSideprops, getStaticProps 에 대해서 간단하게 정리한 글이 있었지만 그때는 완벽하게 이해는 하지 못 했다. 

오늘 다시 이 메소드들을 살펴 보면서 이해한 부분들에 대해서 적어보려고 한다. 

getIntialprops는 next 9 버전 부터 사용을 권장하지 않지만 getServerSideprops와의 차이점을 설명하기 위해 넣어보았다. 

 

우선 getIntialprops과 getServerSideprops 의 차이점에 대해서 알아보자. 

 

두 메서드 모두 요청 마다 데이터를 가져와서 페이지를 pre-render 해야하는 경우에 사용하면 된다. 

두 메서드의 차이점은 데이터 요청을 했을 경우 페이지를 새로 그리는지 아닌지에서 차이가 난다. 

 

- 첫 요청의 값 = { name: react }

- 두번째 요청의 값 = {name: react}

 

위와 같이 첫번째와 두번째 요청의 값이 동일할 경우 

 

 - getIntialprops는 페이지를 새로 그린다. 동일한 값이라고 하더라도 기존의 페이지가 아닌 새로운 페이지를 보여준다.

 - getServerSideprops는 페이지를 새로 그리지 않는다. 즉 동일한 값을 받아 오기때문에 기존의 페이지를 그대로 보여준다. 

getStaticProps는 유저의 요청에 따라 매번 fetching할 필요가 없는 경우에 사용하면 된다. 

---

getStaticProps는 빌드 시점에 데이터 요청을 보내어 받아온 데이터 값을 객체 형식으로 저장을 해둔다. 

그리고 getStaticProps로 빌드한 페이지에 들어가면 처음 한번 저장된 데이터를 가져와 페이지를 그리고 그 이후에는 처음 그려진 페이지를 계속 보여준다. 

 

그리고 getStaticProps와 함께 사용하는 getStaticPath가 있다.

 

getStaticPath는 아래와 같이 미리 설정해둔 경로의 데이터를 받을 수 있게 해준다. 

즉 빌드시 설정해둔 1,3,7,12,20 경로로만 데이터 요청을 보내어 받아온 데이터를 저장한다. 

여기서 fallback 설정을 false로 하면 설정해둔 이외의 데이터는 받아오지 못하고 true로 설정하면 경로 이외의 데이터를 받아오는 것이 가능하다.

export async function getStaticPaths() {
  return {
    paths: [
      {
      	 paths: [
          { params: { id: '1' } },
          { params: { id: '3' } },
          { params: { id: '7' } },
          { params: { id: '12' } },
          { params: { id: '20' } },
        ]
      }
    ],
    fallback: true // boolean 값 
  };
}

 

여기서 fallback을 true로 설정할 경우 경로 이외의 데이터를 받아올수 있으면 getServerSideprops와 동일한 동작을 하는것이 아닌가란 의문이 들었다. 

하지만 명백한 차이가 있다 fallback을 true로 설정해 경로 이외의 값을 받아온다고 하여도 처음 딱 한번만 값을 받아오기 때문에 요청을 보낼 때 마다 다른 결과값을 보내주는 경우는 사용할 수 없다. 

예를 들면 초기값이 1 이고 요청을 보낼 때 마다 1을 더해서 결과 값을 보내 준다고 하면 처음 요청할 때 한번만 받아 오기 때문에 계속 요청을 보낸다고 하더라고 화면에는 1만 보이게 될것이다. 

 

사용법은 next.js 공식문서를 보면 자세하게 알 수 있다.

참고로 이 메서드들은 page폴더 내 파일에서만 정의를 해줘야 사용이 가능하다. 다른 곳에서 사용하고 page폴더내 파일로 import한다 하더라도 사용이 불가능 하다.