nextjs의 서버사이드 렌더링에서 data를 fetch하는 방법을 알아보자

getServerSideProps (SSR)

페이지에서 getServerSideProps함수를 리턴하는 경우에는 해당 함수가 리턴하는 props를 통하여 컴포넌트가 렌더링되기 이전에 pre-rendering 한다.

특징

• 서버측에서만 실행되고 클라이언트 측에서는 실행되지 않는다
• page가 요청 받을때마다 호출된다.즉 꼭 필요한 동적 데이터가 있을때 사용
• page에서만 내보낼수있다 (component X)
• 독립적으로 실행해야한다. 페이지 내부에 들어가면 실행되지않음
• 요청시 데이터를 가져와야하는 페이지에서만 사용해야한다(?)
• 내부에서 에러가 발생시 pages/500.js가 뜬다
• Admin같은 페이지에서는 SEO와 관련없고, 데이터 업데이트가 잦기때문에 오히려 CRS을 고려해보는게 좋다.

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

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external 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

캐싱

내부의 캐싱헤더 (Cache-Control)를 사용하여 dynamic responses를 캐싱할수있다(?)

export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

getStaticProps (SSG)

정적 생성 방식이며, Next.js에서 권고하는 방식이다

특징

• 특정 상황에만 호출되어 자주 바뀌지않는 고정된 내용에 사용되며
  • 빌드될때 실행
  • fallback: true일때 백그라운드에서 실행
  • fallback: "blocking"일때 초기 렌더링 이전에 실행
  • revalidate를 사용할때 백그라운드에서 실행
• 매번 렌더링될때마다 data fetch를 하지않아서 getServerSideProps보다 성능적인 이점이 있다.

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

  return {
    props: {
      posts,
    },
  }
}

getStaticPaths

page에 dynamic routes(동적 경로)를 사용하는 페이지에서 사용된다.
해당함수를 export시키면 모든 경로를 미리 정적으로 렌더링한다.

특징

• return값에 paths, fallback이 있다
• fallback은 (true | false | "blocking") 3가지 값이 있는데
  • true : getStaticPaths에서 리턴하지 않는 페이지에 접속시
    • fallback페이지를 보여주고
    • 서버에서 static하게 페이지를 생성한뒤 사용자에게 보여줌
    • 다음부터 해당 페이지로 접속하는 사용자에게 static한 페이지를 보여줌
  • false : 리턴하지 않은 페이지는 모두 404로 연결
  • "bloking" : 리턴하지 않은 페이지에 접속 시,
    • SSR로 렌더링한 static 페이지만 보여줌
    • 즉 fallback페이지나 로딩페이지가 없다.

Fallback의 3가지 옵션

true와 "blocking" 값은 모두 fallback을 일으키는점에서 비슷하지만, true는 새로운 path에 대해 요청이 왔을때 build시 정적 사이트를 만드는 과정에 fallback버전의 임시페이지가 보여졌다가, 정적생성된 페이지를 보여준다.그리고 build파일에 추가 파일을 남긴다.

"blocking"은 true와 동일하지만 fallback버전의 임시페이지를 보여주지않고 build파일에 파일을 추가하지않는다.

// pages/posts/[id].tsx라는 동적경로 페이지

// "/posts/1"과 "/posts/2"를 생성한다.
export async function getStaticPaths(){
	return {
		paths:[],
        fallback: false,
    }
}

export async function getStaticProps(contex){
	return {
    	props : {}
    }
}

결론

• getServerSideProps는 page가 리렌더링 될때마다 요청되므로 동적인 데이터를 다루는 페이지에서 사용
• getStaticProps는 build시에만 요청되므로 (fallback조건도 있지만) 정적인 데이터를 다룰때 사용함. 성능적인 이점이 있음
• getStaticPaths는 Dynamic route에서 사용. ISR 개념