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

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

보통 React에서는 데이터를 가져올 때 useEffect안에서 가져옵니다. 하지만 NextJS에서는 다른 방법을 사용해서 가져오게됩니다.

1. getStaticProps

getStaticProps : Static Generation으로 빌드(build)할 때 데이터를 불러옵니다.

export async function getStaticProps(context) {
	return {
      props: {}, // will be passed to the page component as props
    }
}

getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render합니다.

getStaticProps를 사용해야 할 때

• 페이지를 렌더링하는데 필요한 데이터가 사용자의 요청보다 먼저 build 시간에 필요한 데이터를 가져올 때
• Headless CMS에서 데이터를 가져올 때
• 데이터를 공개적으로 캐시할 수 있을 때

2. getStaticPaths

getStaticPaths :

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

paths

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

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
}

• 빌드하는 동안 /post/1과 /posts/2를 생성하게 됩니다.

params

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

fallback

• false라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜹니다.
• true라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게됩니다.

// If the page is not yet generated, this will be displayed
   // initially until getStaticProps() finishes running
if (router.isFallback) {
  return <div>Loading...</div>
}

3. getServerSideProps

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

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

// This gets calledon 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

getServerSideProps를 사용해야 할 때

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