Data Fetching

NextJS에서 데이터를 가져오는 방법은

여러가지가 있습니다. 그래서 애플리케이션의 사용 용도에 따라서 다른 방법을 사용해주면 됩니다.

보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져옵니다. 하지만 NextJS에서는 다른 방법을 사용해서 가져오는데 하나씩 살펴보겠습니다.

getStatic Props - Static Generation으로 빌드(build)할 때 데이터를 불러옵니다. (미리 만들어줌)

getStaticPaths - Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현(pages/post[id].js)

getServerSideProps - Server Side Rendering으로 요청이 있을 때 데이터를 불러옵니다.

getStaticProps

함수안에서 어떠한 데이터를 가져온 다음 props안에 posts라는 데이터를 넣어주면 컴포넌트안에서 posts라는 props를 가져올수 있다.

• getStaticProps 함수를 async로 export 하면, getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-remnder 합니다. build time에 페이지를 렌더링 합니다.

getStaicProps를 사용해야 할 때

• 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청보다 먼저 bulid 시간에 필요한 데이터를 가져올 때
• 데이터는 Headless CMS에서 데이터를 가져올때
• 데이터를 공개적으로 캐시할 수 있을때(사용자별 아님)
• 페이지는 미리 렌더링되어야 하고(SEO의 경우) 매우 빨라야 할때. (getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다.)

getStaticPaths

• 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, HTML에 build 시간에 렌더링 됩니다.
• Nextjs는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져옵니다.

Paths

• 어떠한 경로가 pre-render 될지를 결정합니다.
• 만약 pages/post/[id].js 이라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 됩니다.
  
  
• 빌드하는 동안 /posts/1과 /posts/2를 생성하게 됩니다.

params

• 페이지 이름이 pages/posts/[postId]/[commentId] 라면, params은 postId와 commentId 입니다.

• 만약 페이지 이름이 pages/[...slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이어야한다. ['postid', 'commentId']

fallback

• false 라면 getStatic로 리턴되지 않는 것은 모두 404 페이지가 뜹니다.
• true 라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게됩니다.
  
  (예를 들어서 경로가 1, 2번 만 있는 경우 100번에 가고싶다고 하면 404가 뜬다)

• post라는 컴포넌트 안에서 build time에서 콜이 될때 fetch를 이용해서 요청을 보내고 res로 posts의 정보를 가져옵니다.
• 이후 postm를 mpa 매서드를 이용해서 넣어주는데 params에 {id: posts.id} 를 해준다. 이후 return을 해줄때 {paths, fallback: false} 해줍니다.

이후에 getStaticProps를 이용해서 params를 가져와준다.
이후 백엔드에 fetch로 pars.id를 요청해주고 res로 post의 정보를 가져옵니다. 이후 posts를 props에 넣어줍니다.

getServerSideProps

• getServerSideProps 함수를 async로 export 하면, Next는 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render합니다.

// 모든 요청때마다 데이터를 가져오게 됩니다.

getServerSideProps를 사용해야 할 때

• 요청할 때 데이터를 가져와야하는 페이지를 미리 렌더링해야 할 때 사용합니다. 서버가 모든 요청에 대한 결과를 개선하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느립니다.

실제 앱을 만들면서 하나씩 써보는게 이해가 더 쉽다.