[Next.js] Next.js에서 데이터를 가져오는 방법

보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져오지만 Next.js 에서는 다양한 방법이 있다.

1. getStaticProps

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

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

- 빌드할 때 페이지를 렌더링 한다.

 

getStaticProps를 사용해야 할 때

- 페이지를 렌더링 하는 데 필요한 데이터를 사용자의 요청보다 먼저 빌드 시간에 필요한 데이터를 가져올 때

- 데이터를 Headless CMS에서 가져올 때

- 데이터를 공개적으로 캐시 할 수 있을 때 (사용자별 X)

- 페이지는 미리 렌더링 되어야 하고(SEO의 경우) 매우 빨라야 할 때 (getStaticProps는 성능을 위해 CDN에서 캐시 할 수 있는 HTML 및 JSON 파일을 생성한다.)

 

2. getStaticPaths

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

- 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, HTML에 빌드 시간에 렌더링 된다.

- Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져온다.

 

fallback

- false라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.

- true라면 getStaticPaths로 리턴되지 않는 것은 404 페이지가 뜨지 않고, fallback 페이지가 뜨게 된다.

 

3. getServerSideProps

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

 

getServerSideProps를 사용해야 할 때

- 요청할 때 데이터를 가져와야 하는 페이지를 미리 렌더링 해야 할 때 사용한다.

- 서버가 모든 요청에 대한 결과를 계산하고, 추가 구성 없이 CDN에 의해 결과를 캐시 할 수 없기 때문에 첫 번째 바이트까지의 시간은 getStaticProps보다 느리다.