Next.js - Data Fetching ( getStaticProps, getStaticPaths )

getStaticProps

만약 우리가 'getStaticProps'라는 함수를 export했다면 Next.js는해당 페이지를 build-time에 pre-render할 것이다.

getServerSideProps는 request시에라는 점에서 차이가 있다. 그래서 Next.js에서 SSG인 getStaticProps를 추천하는 이유도 여기에 있는 것 같다.

 

< When should I use getStaticProps? >

- use의 request전에 build-time에 pre-rendering되어있으면 좋겠는 곳

- 데이터가 공공적으로 캐싱될 수 있는 곳

- SEO최적화가 필요하고 매우 빠르게 접속될 수 있는 곳, 그리고 CND에 의해 빠르게 캐싱될 수 있는 

CDN의 작동 원리
1. 웹 브라우저가 실행되는 디바이스인 PC나 모바일 기기의 사용자 에이전트가 특정 주소에 접근하여 HTML, 이미지, CSS, JavaScript파일 등 렌더링하는 데 필요한 콘텐츠를 서버로부터 요청

2. DNS는 콘텐츠에 대한 각 요청이 발생하면 End User와 가장 가까운 위치에 최적으로 배치된 CDN서버에 End User가 매핑되고, 해당 서버는 요청된 파일의 캐싱된(사전 저장된) 버전으로 응답(전송).

3. 서버가 파일을 찾는데 실패하는 경우 CDN플랫폼의 다른 서버에서 콘텐츠를 찾은 다음 End User에게 응답을 전송

< When does getStaticProps run >

getStaticProps는 server-side에서만 작동하며 client-side bundle에는 없어진다

- getStaticProps는 항상 'next/build'시에 작동한다

 

 

getStaticPaths

getStaticPaths는 dynamic route로 페이지를 정적 생성할 떄 필요하다.

또한 가장 중요한 것 중 하나는 getStaticPats는 getStaticProps와 무조건 같이 쓰어야 한다는 것이다. 또한 getServerSideProps와는 같이 사용할 수 없다.

 

getStaticPaths는 SEO최적화를 위해 페이지를 pre-rendering하며 HTML파일과 JSON파일을 만든다. 또한 이들은 모두 CDN에 캐싱되어 사용되어 진다.