Next12 [Data Fetching] (getStaticProps, getStaticPaths, getServerSideProps)

보통 리액트에서는 데이터를 가져올 때 useEffect안에서 가져온다.

하지만 Nextjs에서는 다양한 방식이 있다.(useEffect도 가지고 올수 있다.)

 

getStaticProps(ISR)

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

 

getStaticPaths(SSG)

Static Generation으로 데이터에 기반하여

pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)

 

 

getServerSideProps(SSR)

Server Side Rendering으로 요청이 있을 때 데이터를 불러 온다.(계속)

 

 

getStaticProps

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

-  build time에 페이지를 렌더링 
- useEffect로 데이터를 가져왔을 때 보다 훨씬 빠르게 가져온다.

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 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래 처럼 작동

1. 빌드하는 동안 /posts/1과 /posts/2를 생성하게 된다.
2. 이렇게 경로가 생성되면, getStaticProps를 이용해서 해당 페이지들의 HTML을 생성하게 된다.

Params

- 페이지 이름이 pages/posts/postlay.commentld] 라면, params은 postid와 commentld .
- 만약 페이지 이름이 pages....slug] 와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이어야한다. [postld', 'commentld]

 

fallback

(만약 들어간 페이지의 경로가 getStaticPaths에서 리턴하는 paths에 없을 때 어떻게 처리할 것인가...)
- false 라면 getstaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.
- true 라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게 된다.

* 그래서 먼저 사용자에게 fallback 페이지를 보여줍니다.
* 그리고 서버에서 static 하게 페이지를 생성합니다.
* 그 후에 서버에서 생성한 해당 페이지를 사용자에게 보여줍니다.
*그 다음부터는 해당 페이지로 접속하는 사용자에게는 static 한 페이지를 보여줍니다.

 

getStaticPaths 소스코드

1.빌드 타임에 getStaticPaths가 호출되고 params와 fallback을 리턴

2.이후 빌드 타임에 getStaticProps가 호출 되고 1 에서 티런해준 params를 사용

3. 서버에 요청해서 받은 해당 정보를 리턴

4. Post 컴포넌트에서 사용

 

getServerSideProps

- getServerSideProps 함수를 async로 export 하면,

  빌드타임때 가져 오는게 아니라 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render한다.

getServersideProps를 사용해야 할 때

- 요청할 때 데이터를 가져와야하는 페이지를 미리 렌더해야 할 때 사용합니다.
   서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에

   첫번째 바이트까지의 시간은 getStaticProps보다 느리다.
    (TTFB-Time to first byte, HTTP요청 이후 처음 데이터가 도달하는 시간)