getServerSideProps

getServerSideProps는 Next.js에서 제공하는 서버 사이드 렌더링(SSR)을 위한 함수이다. 이 함수는 각 요청에 대해 서버에서 실행되며, 페이지에 필요한 데이터를 가져와 페이지의 props를 통해 컴포넌트로 전달한다.

렌더링

보통 유저는 페이지가 자바스크립트 로드까지 끝난 뒤 자바스크립트를 통해 요청한 데이터를 기다린 후 데이터 fetch가 끝나면 페이지를 온전히 받을 수 있게 된다. 하지만 getServerSideProps로 데이터를 서버 측에서 요청한 데이터로 받을 수 있다면, 자바스크립트 로드를 기다리지 않는 다는 이점 하나만으로도 TTFB를 크게 줄일 수 있다.

다음은 getServerSideProps의 기본적인 사용 방법이다.

export async function getStaticProps() {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, 
  }
}

getServerSideProps는 페이지의 초기 로딩 시에만 실행되며, 클라이언트 사이드 라우팅에서는 실행되지 않는다. 그러나 매 요청마다 서버에서 실행되므로, 트래픽이 많은 웹 사이트의 경우 서버에 부담을 줄 수 있다.

SEO

클라이언트 사이드에서 API를 요청하는 경우, 크롤러가 페이지를 방문했을 때 데이터를 로딩하는 JavaScript 코드만 볼 수 있다. 이 경우 크롤러가 데이터를 인식하는 데 어려움이 있을 수 있다. 반면에 서버 사이드에서 API를 요청하면, 크롤러가 방문했을 때 이미 완성된 HTML을 보게 되므로, SEO에 유리하다.

다른 방법

Next.js는 또한 getStaticProps라는 다른 데이터 가져오기 함수도 제공하는데, 이는 정적 생성(Static Generation, SSG)을 위한 것이다. getServerSideProps와 다르게 getStaticProps는 빌드 시에만 실행되므로, 요청마다 실행되지 않는다. 때문에, 가능한 경우 getStaticProps를 사용하는 것이 효율적일 수 있습니다.