Nextjs에서 데이터를 가져오는 방법은?
여러 가지가 있다. 그래서 애플리케이션의 사용 용도에 따라 다른 방법을 사용해주면 된다. 보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져온다. 하지만 Next.js에서는 다른 방법을 사용해서 가져오는데 하나씩 살펴보자.
getStaticProps
Static Generation으로 빌드(build)할 때 데이터를 불러온다. (미리 만들어줌)
getStaticPaths
Static Generation으로 데이터에 기반해 pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)
getServerSideProps
Server Side Rendering으로 요청이 있을 때 데이터를 불러온다.
getStaticProps
getStaticProps 함수를 async로 export하면, getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render한다. build time에 페이지를 렌더링한다.
getStaticProps를 사용해야 할 때
- 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청보다 먼저 build 시간에 필요한 데이터를 가져올 때
- 데이터는 Headless CMS에서 데이터를 가져올 때
- 데이터를 공개적으로 캐시할 수 있을 때(사용자별 아님)
- 페이지는 미리 렌더링되어야 하고 (SEO의 경우) 매우 빨라야 할 때
- getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.
getStaticPaths
- 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, HTML에 build 시간에 렌더링된다.
- Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져온다.
paths
- 어떠한 경로가 pre-render될지를 결정한다.
- 만약 pages/posts/[id].js라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 된다.
- 빌드하는 동안 /posts/1과 /posts/2를 생성하게 된다.
params
- 페이지 이름이 pages/posts/[postId]/[commentId]라면 , params은 postId와 commentId이다.
- 만약 페이지 이름이 pages/[...slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이여야 한다. ['postId', 'commentId']
fallback
- false라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.
- true라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜬다.
반응형
