[Next.js] SSG

SSG 란?

Static Site Generation 공식문서 참고

Next의 pre-rendering 방식 중 하나
getStaticProps를 활용하여 고정된 페이지를 미리 랜더링 하는 방식
yarn build 후 확인 가능

SSG를 사용하면 좋은 페이지

• 정적인 텍스트/이미지 화면 페이지(자주 안바뀌는 데이터를 가진 화면)
  • 블로그 포스트
  • 마케팅 페이지
  • E-commerce 상품 리스트 페이
  • FAQ, 문서 페이지

SSG 2가지 케이스

1. 외부 데이터 없이 pre-rendering 가능
2. 외부 데이터(다른 파일, api, db등) 가져와서 pre-rendering

실습해보기
https://nextjs.org/learn-pages-router/basics/data-fetching/blog-data

Data를 가져오는 함수 getSortedPostData

• 다른 파일 조회
• 외부 api 요청
• db 조회