Next.js에서 페이지를 렌더링할 때 데이터를 가져오는 방법, React 컴포넌트에서 useEffect나 fetch로 가져오는 게 아니라, 페이지가 만들어질 때 서버에서 데이터를 먼저 가져와서 props로 넘겨주는 방식
- getStaticProps : 정적 생성
- 페이지를 빌드할 때 HTML을 미리 생성
- 정적인 데이터일 때 유리 (ex. 블로그 글, 상품 리스트)
- CDN에 캐싱되어 빠른 응답 속도
- 서비스 소개, FAQ, 이벤트 페이지 등은 내용이 자주 바뀌지 않으므로 정적으로 생성하면 효율적
- getServerSideProps - 서버 사이드 렌더링 (SSR)
- 매 요청마다 서버에서 데이터를 받아 HTML 생성
- 요청 시점에 최신 데이터 필요할 때 사용 (ex. 로그인한 유저 정보, 실시간 검색 결과 등)
- 로그인한 유저의 정보나 주문 내역 등은 항상 요청할 때 최신 상태여야 하므로 SSR이 적합