NextJS Data Fetching

여러방식이 있어서 그 사용용도에 맞는 방식을 사용한다.
보통 리액트에서는 useEffect안에서 가져오지만 Nextjs에서는 아래와 같은 방법으로 가져온다.

1. getStaticProps Static Generation으로 빌드할 때 데이터를 불러오는 방식
2. getStaticPaths Static Generation으로 데이터에 기반해서 pre-render시 특정 동적인 라우팅 구현 (pages/post/[id].js)
3. getServerSideProps ServerSideRendering으로 요청이 오면 데이터를 불러온다.

getStaticProps

아래처럼 함수를 export하면 리턴되는 props를 가지고 그 페이지를 build time에 미리 렌더링한다.

export async function getStaticProps() {
  return {
    props: {	//  이 안에있는거 build time에 미리 렌더링
      posts,
    }
  }
}

getStaticProps를 사용할 때

• 페이지 렌더링시 사용자 요청보다 먼저 build하는 시간에 필요한 데이터를 가져올 때
• Headless CMS에서 데이터를 가져올 때
• 데이터가 공개적 캐시가 가능할 때
• SEO의 경우 페이지는 미리 렌더링이 필요하고, 매우 빨라야할 때 (getStaticProps는 성능 때문에 CDN에서 캐시할 수 있는 HTML, JSOn파일을 생성한다.)

getStaticPaths

동적인 라우팅이 필요하면 이 방식을 사용, 경로 리스트를 정의하고 HTML build시간에 렌더링 된다. (정적으로 호출하는 경로들을 가져온다.

// 어떤 경로가 프리렌더될지 정하고
// ex) 경로가 pages/posts/[id.js]면 아래처럼 하면
// 빌드하는 동안에 /posts/1하고 /posts/2를 생성한다.
export async function getStaticPaths() {
  return {
    paths: [
      // params
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true	// false of blocking
  }
}

params

• 페이지 이름이 pages/posts/[postId]/[commentId]면, params는 postId와 commentId다.
• 만약 페이지 이름이 pages/[...slug]처럼 모든 경로를 쓰면, params는 slug가 담긴 배열이된다. ['postId', 'commentId]

fallback

• false면 리턴되지 않은 것은 404페이지로, true면 404가 아닌 fallback페이지가 뜬다.

getServerSideProps

요청을 보낼 때 마다 리턴되는 데이터를 프리렌더한다.

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

요청할 때 데이터가 필요한 페이지를 미리 렌더링할 때 사용, 서버가 모든 요청에 대한 결과를 계산, 추가 구성없이 CDN에 의한 결과를 캐시할 수 없어서 첫번째 바이트까지 getStaticProps보다 느리다.