Data Fetching

 

📍getStaticProps

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

build time에 페이지를 렌더링 함

- useEffect로 데이터를 가져왔을 때보다 훨씬 빠르게 가져옴

 

 

☑️사용 할 때

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

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

- 모든 사용자에게 같은 데이터를 보여줄 때

-페이지는 미리 렌더링되어야 하고 매우 빨라야 할 때 

 

☑️사용법

 

 

☑️예시

 

 

📍getStaticPaths

- 동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, html에 build 시간에 렌더링됨

- nextjs는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져옴

 

☑️사용법

 

☑️paths

- 어떤 경로가 pre-render 될지 결정

- pages/posts/[id].js 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 됨

1. 빌드하는 동안 /posts/1과 /posts/2를 생성하게됨

2. 이렇게 경로가 생성되면 getStaticProps를 이용해서 해당 페이지들의 html 생성

 

☑️fallback

- 만약 들어간 페이지의 경로가 getStaticPaths에서 리턴하는 paths에 없을 때 처리

 -- 예를 들어 localhost: 3000/posts/10000으로 진입 , 근데 10000이 없음

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

- true라면 fallback 페이지가 뜸 

 

 

☑️예시

 

📍getServerSideProps

- next는 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render함

- A 페이지에 들어간 후 다른 페이지에 갔다가 다시 A페이지에 들어가도 다시 생성. 최신 데이터가 반영됨

 

☑️사용할 때

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

 

☑️사용법

 

☑️예시

 

// This gets called on every request

// 각 요청마다 불러옴