getStaticProps와 getServerSideProprs

NextJS를 사용한다면 무조건 사용하게 될 두 메서드에 대해서 공부한 내용을 작성해보고자 한다.

공통점

두 메서드는 서버사이드 렌더링을 하기 위해 존재하는 메서드이다.

리액트를 사용해본 경험이 있다면 화면을 새로고침하였을 때 살짝 깜빡이는 현상이나 로그인이 풀렸다가 로그인되는 현상을 겪어 보았을 것이다. 

이런 현상이 발생하는 이유는 처음 Html파일을 로드한 후 데이터를 불러오기 때문에 이 짧은 시간으로 인해 새로고침되는 것처럼 보이는 것이다. 

그래서 NextJS에서는 getStaticProps와 getServerSideProps를 지원하는데 해당 메서드를 사용하여 컴포넌트를 만든다면 빌드시에 미리 해당 컴포넌트에 필요한 데이터와 html파일을 모두 만들어 놓은 뒤 사용자에게 제공한다. 

차이점

이 두개의 메서드는 SSR을 지원한다는 공통점이 있지만 매우 다르게 동작한다는 차이점이 존재한다.

getServerSideProps

제일 많이 사용하게될 메서드이다. 

getServerSideProps를 사용하게 되면 pre-render를 하게되는데 이는 서버에서 필요한 데이터를 미리 불러온 후 props의 값으로 전달하여 해당 컴포넌트가 렌더링 될때 데이터를 채워서 렌더링을 하게 된다. 

그렇기에 데이터를 불러오는 과정으로 인해 새로고침시 깜빡꺼리는 현상이 있지만 로그인 상태에서 새로고침시 로그인이 풀렸다가 로그인이 되는 현상은 발생하지 않는다. 

// function
export async function getServerSideProps(context) {
  return {
    props: {},
  }
}
// arrow function
export const getServerSideProps = async(context) => {
  return {
    props: {},
  }
}

getStaticProps

해당 메서드는 사용하기 까다로운 메서드이다.

그 이유는 해당 메서드는 build할 때 미리 html파일을 만들어 놓기 때문에 데이터가 바뀌는 페이지일 경우 해당 메서드를 사용하는것이 안된다. 

하지만 해당 메서드를 사용하면 이미 html파일을 만들어 놓았기 때문에 SEO에 많이 유리하고, 속도 또한 빠르다. 

해당 메서드를 사용하여 페이지를 만들어 놓으면 새로고침시에 깜빡거리는 현상이 사라지게 된다. 

// function
export async function getStaticProps(context) {
  return {
    props: {},
  }
}
// arrow function
export const getStaticProps = async(context) => {
  return {
    props: {},
  }
}

필요한 것을 골라서 사용하자

그렇다면 어떤것을 사용해야 할지 고민을해봐야 한다.

만약 페이지가 동적인 데이터가 없는데 getServerSideProps로 만들었다면 이는 불필요한 기능을 추가한 것이다. 그럼 반대로 동적인 데이터가 필요한 페이지에서 getStaticProps를 사용하는 것 또한 잘못된 것이다. 

이처럼 내가 무엇인가를 개발할때 해당 페이지가 검색엔진에 더 노출이 되어야 하고, 동적인 데이터가 필요하지 않다면 getStaticProps를 사용하여야 하고, 검색엔진에 노출이 되어야 하지만 동적인 데이터가 들어가 있어야 한다면 이때는 getServerSideProps를 사용하면 된다.