Next.js는 페이지를 미리 렌더링하여 성능을 최적화한다. 사전 렌더링 방식은 SSR, SSG, ISR로 나뉘며, 각 방식마다 데이터 패칭 시점과 적용 방식이 다르다.
getServerSideProps, getStaticProps, revalidate 등의 API를 사용| 방식 | 설명 | 키워드 | 특징 |
|---|---|---|---|
| SSR (Server-Side Rendering) | 요청 시 서버에서 HTML을 동적으로 생성 | getServerSideProps |
매 요청마다 실행되며 최신 데이터 가능 |
| SSG (Static Site Generation) | 빌드 시 HTML을 미리 생성해 배포 | getStaticProps |
정적 페이지, 빠른 로딩, CDN 캐싱 |
| ISR (Incremental Static Regeneration) | SSG와 유사하지만 일정 주기마다 갱신 가능 | getStaticProps + revalidate |
최신 데이터 반영 가능, 빠른 초기 로딩 |
getServerSideProps