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 페이지가 뜬다.
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 페이지가 뜬다.
