[Next.js] getServerSideProps / getStaticProps 사용 구분

Next.js는 더 나은 성능과 SEO를 위해 모든 페이지를 미리 렌더링 한다. (Pre-render)
렌더링의 방식은 getServerSideProps와 getStaticProps로 나뉜다. 이 둘의 차이와 활용에 대해 정리해보도록 하겠다.

getServerSideProps

서버 사이드 렌더링(SSR) 방식이다. 즉, 서버 측에서만 실행되고 브라우저에서는 실행되지 않는다.
외부 데이터를 서버에서 받아와 초기 데이터로 설정하고 페이지로 전달한다.
페이지 요청 시마다 실행된다.
getStaticProps보다 성능이 떨어지지만, 동적으로 데이터를 가져와 업데이트가 가능하다는 장점이 있다. (Dynamic Rendering)
가져온 데이터를 props에 담고 return하여 컴포넌트에 전달한다.

언제 사용하나?

요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링해야 하는 경우에만 사용한다. (ex. 외부 API 활용해 데이터를 동적으로 가져오는 경우 등)

Next.js는 getServerSideProps를 정말 필요할 때만 사용하라고 권고한다. CDN에 캐싱되지 않기 때문에 느리기 때문이다.

데이터를 미리 가져올 필요가 없다면 클라이언트 측에서 데이터를 가져오는 것도 고려해봐야 한다. (ex. 사용자 대시보드는 사용자별 비공개 페이지이므로 SEO와 관련 없으며 미리 렌더링할 필요가 없다.)

기본 형태

function Page({ data }) {
  // Render data...
}

// SSR
export async function getServerSideProps(context) {
  // 외부 API로 데이터 가져오기
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

getServerSideProps의 매개변수인 context의 객체 구성

• params: 동적 경로를 사용하는 페이지에 대한 정보를 담는다. 동적 페이지의 파일명이 [id].js인 경우 context.params는 {id: ...}를 반환한다.
• req: HTTP request object
• res: HTTP response object
• query: 쿼리 문자열
• preview: preview mode 여부 (자세한 설명)
• previewData: setPreviewData로 설정된 데이터

getServerSideProps의 반환값

• props(option) : 해당 컴포넌트로 반환할 값
• redirect(option) : 값 내부와 외부 리소스 리디렉션 허용한다.
  { destination: string, permanent: boolean }
• notFound(option) : Boolean 값, 404 에러를 반환한다.

getStaticProps

정적 페이지 생성(Static Site Generation) 방식이다.
CSR이 아니고, 항상 서버에서 실행된다.
빌드 단계에서만 데이터를 가져오고 JSON으로 저장하여 고정적으로 사용한다.
가져온 데이터를 props에 담고 return하여 컴포넌트에 전달한다.
페이지 요청 때마다 데이터를 가져오는 게 아니라서 성능 면에서 뛰어나다.

언제 사용하나?

빌드 후에도 고정되는 내용을 보여주는 페이지에 적합하다.
(ex. 블로그 포스트, 상품 페이지, Docs 등 내용이 고정적이며 SEO가 중요한 페이지)

기본 형태

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// SSG
export async function getStaticProps(context) {
  // 외부 API 호출
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default Blog

getStaticProps의 매개변수인 context의 객체 구성

• params: 동적 경로를 사용하는 페이지에 대한 정보를 담는다. 동적 페이지의 파일명이 [id].js인 경우 context.params는 {id: ...}를 반환한다.
• req: HTTP request object
• res: HTTP response object
• query: 쿼리 문자열
• preview: preview mode 여부 (자세한 설명)
• previewData: setPreviewData로 설정된 데이터

getStaticProps의 반환값

• props(option) : 해당 컴포넌트로 반환할 값
• revalidate(option) : 해당 페이지의 재생성 발생 가능 시간(sec). 기본 값은 false다. false일 경우 해당 페이지가 다음 빌드 때까지 빌드된 상태로 캐시된다.
• notFound(option) : Boolean 값, 404 에러를 반환한다.